百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

高级PM教你定制APP通用元件库 东莞pm2.5

yuyutoo 2024-10-12 01:15 4 浏览 0 评论

视觉设计师有自己的组件来定义视觉规范,前端工程师有系统SDK自带的UIkit调用,而我们产品经理也应该有一套适合自己的元件库来提升画原型的效率。

网上有不少文章叫你如何使用Axure的元件库功能,侧重于讲工具使用。

而我这篇文章侧重于讲方法论。从定义元件库的结构,到如何设计每个元件。。

一、前言

这些元件库当然不错,但是存在几个问题。

  • 不是为自己设计的,不知道运用到什么场景
  • 带有强烈的公司风格,无法通用,只能借鉴
  • 配色有强烈的视觉风格,很难适合自己
  • 很多元件是截图,不太通用
  • 有很多无用的元件,不知道该删除还是保留

建议每个PM为自己定制元件库并长期更新,这样能够极大的提升自己设计原型的效率,而且可以保证原型整体的视觉统一。

二、定制元件库的思路

该元件库存放了一个个元件,而且必须是常用的。并且需要保证这些元件在设计其他手机APP的时候,也大部分适用。

从PM画原型的工作中,我们其实梳理出大概有哪些工作,哪些可以转化成通用元件。

拆分产品工作

移动端原型的具体设计有四步骤:

定架构→画页面→加交互→写逻辑

  • 定架构的过程中,画业务流程、功能流程、页面流程的时候,需要用到哪些图形。
  • 画页面的过程中,大概有哪些常见的组件呢。有页面本身、视觉组件等。
  • 加交互的过程中,大概有哪些东西呢,比如弹窗、吐司提示,模态视图等。有时候也需要用手势表示一下逻辑,毕竟Axure的手势对移动端支持不够。
  • 写逻辑的过程中,可能需要用到一些常见的逻辑,也可以放进去。这一点看各自的需求。

需要注意的是,虽然我们遵循Axure的命名规则叫它元件库,但本质上和Axure默认的Default、flow、icon元件库是有区别的。前者侧重于功能组件,后者侧重于最细粒度的控件。事实上前者是控件的组合,称之为组件库其实更合适。

元件库的结构

按照上述的产品工作拆分,可以得到对应的元件库结构。

请注意Axure的元件库在载入的时候,不支持多级目录。请尽量设置成一级。

或者像我这样命名多层目录,虽然是多层,但是最终载入的时候,自己还是能够清晰理解的。

最终载入元件库的效果如下:

接下来我们一一来讲解如何设计。

三、元件库的设计原则

之所以你从网上下载的元件库不太好用,是因为未遵循以下原则。

配色只使用黑白灰

勿用彩色,这样不会影响视觉设计师定义视觉风格的思路,以及不会误导视觉设计师。

使用默认元件加工而成

因为是默认元件,所以原型的视觉风格都是统一的配色黑白灰,统一的控件样式。

默认元件大家都很熟悉,当在rp中插入该元件库中的组件,如需二次修改也很方便。

默认元件不自带交互不带注释不带有命名,如果你使用网上下载的元件,那么有很多干扰信息,定制元件库的时候修改起来特别麻烦。

尽量不要导入位图

往往该图表示了一定含义,无法用到在其他项目。

很占空间,如果二次压缩又会模糊。

补充一点,有时候需要图标表示重点内容,可以导入svg的矢量图来配合着设计组件。不占空间而且通用。

元件尺寸基于同一机型制作而成

如果不是基于某一机型的分辨率制作,那会导致制作的原型中的控件,尺寸不协调,不专业,并且视觉设计师很难理解功能。

以iPhone6/6s/7的逻辑分辨率制作

也就是375×667,以这个分辨率制作的原型,可以基本适配所有的iOS和Android机型,所以倒推回来,元件库也应该以这个尺寸来设计。

四、页面组件

由于定架构这个比较复杂,大部分初级PM不懂。

我们先从最简单常见的页面组件来讲,也就是APP中最常见的视觉组件、基础功能。

页面框架

我所谓的页面框架是指这个. 每设计一个页面都需要用到的公用部分。

你也可以在rp文件中定义可脱离母版来多次使用,但是其他rp不通用。所以还是推荐用元件库的方式来满足重复使用的需求。

页面框架有带手机框和不带手机框两类。特别反感使用带手机框的页面框架。除了花哨没有任何价值。而且无法设计超过一屏幕高度的内容。

如果不带手机框,就不会有这个问题。此时还有2种做法:带状态栏和不带状态栏。

至于你选择带状态栏的375×667,还是不带状态栏的375x(667-20状态栏),因人而异。我因为要求自己的 APP原型可以在手机上完美体验,所以选择的是375×647。

但是不管选哪种,你设计的其他元件如果需要包含页面框架,都应该遵循该标准。

视觉组件

Axure默认元件库中自带了一些常见控件,这里不重复做。我只做常见的视觉组件,以及常见的小功能单元。

五、交互组件

将常见的交互组件提取出来,大概有以下三种。

常见提示

常见的toast提示、alert弹窗、小红点。

键盘

常见的一些键盘,使用的是截图。尽量少用,除非必要。

手势

常用的大概有八种,iOS官方人机交互设计规范中定义了。而Android官方定义了28种,很多华而不实,不用也罢。

手势元件可以在Axure无法做出你的交互,或者做起来很麻烦的时候,直接用它来快速表示。

七、逻辑要点

我把所有常见的控件的逻辑,都梳理了一遍。比如你要写密码框、手机号输入框等的逻辑,直接使用和修改值即可。

时间有限,我只做了2个。大家可以根据自己的需求,参考这篇文章来制作APP文本框通用的输入规则。

八、画图建模

这个属于进阶技能,有些复杂。但是一旦学会,你的画原型体系应该比较健全了。

功能流程

相关的介绍,可以查看我的文章《如何正确地画出页面流程图》。

页面流程

相关的介绍,可以查看我的文章《如何正确的画出功能流程图》。

实体关系模型

相关的介绍,可以查看我的文章《如何用ER图绘制业务实体模型》。

状态机

相关的介绍,可以查看我的文章《如何绘画状态机来描述业务的变化》。

用例图

属于UML的范畴,了解即可。

九、其他

当然也可能还有其他的,根据自身需求而定。

不建议把独立的图标导入到这个“组件库”,请单独使用FontAwesome或者SVG元件库等。

页面状态

另外页面状态也可以加进去,比较常用。

不过也可以作为全局规范写到单独的页面给到视觉设计师、前端工程师。

十、总结

强烈推荐每个PM定制一份适合于自己的元件库,绝对会让你提升工作效率,而且可以梳理自己对组件、控件以及架构的理解。

相关推荐

野路子科技!2步教你把手机改造成一个FTP服务器,支持PC互传

哈喽,大家好,我是野路子科技,今天来给大家带来一个教程,希望大家喜欢。正如标题所言,就是教大家如何把售价改造成FTP服务器,而这个时候估计有朋友会问了,把手机改造成FTP服务器有什么用呢?现在有Q...

不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用

我先前的作品中,有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频,而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...

Qt三种方式实现FTP上传功能_qt引入qftp库

FTP协议FTP的中文名称是“文件传输协议”,是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一,其传输效率非常高,在网络上传输大的文件时,经...

Filezilla文件服务器搭建及客户端的使用

FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...

美能达柯美/震旦复印机FTP扫描怎么设置?

好多网友不知道怎么安装美能达/震旦复印机扫描,用得最多是SMB和FTP扫描,相对于SMB来说,FTP扫描安装步骤更为便捷,不容易出问题,不需要设置文件夹共享,所以小编推荐FTP来扫描以美能达机器为例详...

CCD(简易FTP服务器软件)_简单ftp服务器软件

CCD简易FTP服务器软件是一款很方便的FPT搭建工具,可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单,只要运行软件就会自动生效,下载银行有该资源。该工具是不提供操作界面的,其他用户可以输...

Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器

在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法,适合需要进行大量文件交换的场景。以下是一步步指导,帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...

理光FTP扫描设置教程_理光ftp扫描设置方法

此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题,由于旧的SMB协议存在安全漏洞,所以微软在新的系统,WIN8/WIN10/SERVER201220162018里使用了新的SMB传...

纯小白如何利用wireshark学习网络技术

写在前面工欲善其事必先利其器!熟悉掌握一种神器对以后的工作必然是有帮助的,下面我将从简单的描述Wireshark的使用和自己思考去写,若有错误或不足还请批评指正。...

京东买13盘位32GB内存NAS:NAS系统安装设置教程

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:yasden你没有看错,我在京东自营商城购买硬件,组装了一台13盘位,32GB内存的NAS,硬盘有13个盘位!CPU是AMD的5500!本文...

FileZilla搭建FTP服务器图解教程_filezilla server搭建ftp服务器

...

python教程之FTP相关操作_python ftps

ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2,显示详细信息ftp.connect(“I...

xftp怎么用,xftp怎么用,具体使用方法

Xftp是一款界面化的ftp传输工具,用起来方便简单,这里为大家分享下Xftp怎么使用?希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...

树莓派文件上传和下载,详细步骤设置FTP服务器

在本指南中,详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写,只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法,你可以用...

win10电脑操作系统,怎么设置FTP?windows10系统设置FTP操作方法

打印,打印,扫描的日常操作是每一个办公工作人员的必需专业技能,要应用FTP作用扫描文件到电脑上,最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行,但人们还可以应用Windows的系...

取消回复欢迎 发表评论: