UI流程感想

这篇文章主要是针对自己工作有时拖延的毛病，平时的工作是做手机App界面，我呀，真是要时刻提醒自己，要先有再优，即使再烂，也没关系，就像是好文章都是改出来，先把字数凑够，给自己改两三遍怎么样都可以了，我之前容易专在细节里，现在把一些细节列出来串起来，希望有个整体的脉络。可能写工作的琐碎比较多，有些啰嗦，专到细节里去了，我也就是想记详细，看看之后怎么修改，欢迎提建议，或添砖加瓦的。可能缺少创意的参与，之后改进……以下平时做Ui的大概的目录。

一、大概的流程，要做的事

二、各个环节需要注意的点，遇到过的问题，解决方案或是可能的解决方案

一、大概的整个流程

1、交接需求——检查流程是否通顺，了解需求

2、检查细节，设想这个功能使用的各种情况，补全线框图或沟通（完善流程、场景演绎）

3、看竞品，分析优劣，取长补短

4、做UI图，先有再优

5、检查一遍

6、标注和切图（检查第二遍）

二、各个流程需要注意的点，遇到过的问题和可能的解决方案

1、交接需求

用户是谁，客户是谁，为了结合产品自身定好感觉、色调和风格（做现有App的新增功能的时候，比较少考虑风格，如果能新颖和活泼最好，为了能整体统一，支付宝高兴颜色变了，风格还是扁平的）

定位这个需求要解决的问题，或是想要达到的预期，或是当时场景下用户的目标，了解用户与产品的是怎样的场景互动。

实际是，拿到线框图文件，自己先走一遍，检查流程是否通顺，有不懂和不通的地方集合在一起来问，同时如果要增加页面和提出问题、建议修改要早提，以免因为自己不能解决的问题影响整体任务进度（从线框图倒推、能知道，功能是怎样的，页面从哪里开始、用户怎么操作，需要怎样的引导）

遇到过的问题

比如现在做的微信签到，开始不清楚第一个页面是怎么进到学员列表设置签到的页面的，看了线框图说明才知道，是由点击链接或是扫一扫开始的，然后询问产品经理各种可能的问题，当签到的人名重复时怎么办？签到设置能修改吗？ID这样的数据一般文字有多少个，为了方便排版，好像我当时一会儿一个问题，有点耽误时间（有线框图和说明的尽量先自己看，整体自己理解，实在不懂的再集合一起问）批量签到是只针对老师点名吗？这样真的方便吗？提了建议，1、结合现有二维码扫码签到的功能，这样可以实时检查谁没到，又可以快速签到；2、现在是一个列表显示所有人，如果把已签到、旷课和请假的区分开，查看会更方便些；3、人多时右边加上首字母目录快捷定位功能（后面产品说，因为这个列表右边需要操作，放目录会容易误操作，就不考虑，也可以有课上下拉的快捷按钮，有这么做的，但好像忘记是什么App了。。。）。

2、检查细节，从场景出发、检测缺了什么

设想这个功能使用的各种情况，补全线框图或沟通（完善流程、场景演绎）

自己检查，各个地方文字字数多时怎么显示？比如之前碰到的，在签到列表只有名字信息情况下，如果学员的名字重复时怎么分辨？还有检查整个流程有没有需要提示的部分？加载慢时，空页面时，没有搜索结果时，还有比如看视频过程中，如果突然出现做题的情况，不给提示肯定不合适，怎样互动，互动后又是怎样的？上拉加载还是下拉加载，文字提示表意明确吗？

遇到的问题：

讲义评论的列表，现在是这样的，在半屏的讲义页面的下方，有两种评论是上下排的，一种是当前评论列表、还有一种是全部评论列表，前者在后者的上面，当前者比较多时，这个页面是只展示前者还是两种都展示，如果都给，需要给两者做加载，然后开发也复杂一些， 每次加载20条还是10条，全部评论在每页PPT都会出现，相同信息出现多个地方时，可能因为时间变化新增评论，是每次都请求吗？这样会比较耗内存，每次都刷新会增加运行负担，如果不请求最新的评论，当我在第一页@别人时，在第三页我看不到全部评论里自己发的信息，只有退出PPT后在进来才可看到自己刚刚写的评论，用户反馈很慢。

最后确定的是最好是设置一个下拉刷新的功能。开始做的时候主要是想着静态的。。。等到开发问时，才知道要想到上面下面这些动态的问题。。。。。自己评论时，要实时的看到自己的内容吗？什么时候刷新？实时刷新耗内存怎么办？怎么设计才能逻辑简单不给开发加负担，又能维护用户的体验？之后要考虑啊

3、看竞品

视觉上：从用户的目标和使用场景推出Ui需要应景的感受和状态，通过感受词，产品自己的特点，找图片，与感觉相关的图片，确定颜色，样式，提取图形。通过用户使用状态确定字体大小，比如用户比较匆忙的话就用辨别度比较高的大一点的明显的字。

了解产品竞品，找几个最新或是火的的竞品，看他们的特点，看怎么做不同又更好，自己怎么定位风格。

根据自己的定位找几个其它行业风格相似的精彩的相关设计+最新的趋势+自己的产品需求，分析优劣，取人家精彩的点或方法：样式、色彩方式、构图、细节。

取长补短，尝试整合出适合自己的视觉风格来。

交互上：看ios最佳和一些比较大众的App上是否有相关的交互，分析为什么这么做，这样做的优缺点，对于多个不同App都相同的交互，如果是已有的养成的用户习惯，也适合我们的用户场景，是需要延续的，如果这些竞品之间的交互方式是不同的，就分析其中的优劣，找出它们之所以不同的原因，再结合自己的产品特点，找到适合的交互方式。

4、做UI图

1、信息分类、归纳、整合，按操作时的关系、所属关系、流程上的主次关系，分清主次，再排版，尽量使页面简洁，主次分明。

2、确定好风格，样式，先做一版，再在完善中，尝试相关的表现方式，在色彩、样式、形状、交互上多做实验，怎么眼前一亮呢。。。。再互相比较好坏优劣。

做出完整的方案，流程统一，交代页面内容、控件、颜色、形状、交互，选择合适的风格套路，可以尝试以上收集的相关设计和竞品的方法。

3、考虑到各个控件的激活、可点击、不可点击状态，文字多时的状态，

注意 是否方便操作，是否易识别，不容易误操作。是否最简约，整合起来了

平时积累好的设计，有好的各种风格摄影、设计作品积累和搜集，能够比较明了为什么好，怎么表达好，能尝试模仿或自己做出来好的设计来最好，使日常工作中有更多表达素材。

色彩和样式上有自己的产品品牌特征，感觉差别相似就好吧，最好最后考虑吧，别被限制了，我是急需突破。

5、检查

看是否要放 “加载中”状态提示；列表、首页的上、下拉“刷新”状态，“到底了”提示；默认头像；空页面；考虑并表现标题、文字和数据比较多时的展示形式；考虑极限压力测试的情况，列表比较多 、加载比较慢会不会影响用户目标和体验，怎么加载的逻辑，一次显示多少，怎么减少内存压力又能保证用户体验。

有没有不合适的标题、文字、文案 ，有没有错别字，有没有歧义，提示语有没有显得累赘和重复啰嗦。

是不是少了控件；

是否达到了预期，整个流程能通，识别自然，主次分明，

控件是否考虑了ios和android都能实现，如果是找ios做的，那再找安卓手机试一下有没有这样的控件，经常是ios有的安卓没有，比如：

1、长按复制，ios是一栏小黑按钮，可以选择文字，android就是一个大白弹框，安卓的弹框各种各样，只能对整个list进行操作，需要统一简单的，因为安卓的手机版本和厂家很多不一样，如果实在要用，有点现有用户的低端安卓机不能支持，导致他们屏幕显示的惨不忍睹。

2、还有想要用安卓一个最新的控件特效，按钮按下去出现水纹扩散，有些手机不能看。。。。就容易有不同手机不同样子，不统一的情况

3、安卓上面时间状态栏也不能统一。。。。有的是渐变透明，有的是黑条，有的可以自定义。

4、ios可以左滑删除，安卓就不行，要长按。

5、ios有返回按钮，没有实体键、安卓有实体键

6、ios不能上传除了照片和本应用外的文件，安卓可以支持各种比如照片、MP3、ppt、pdf

是否方便操作。比如点击区域是不是大于88px，图标是不是40px，

6、标注和切图（第二遍检查、在标注的过程中调整）

标注：

各个元素大小间距是否成倍数、

文字是否统一有次序、比如有分成大中小吗？40、32、28、24px

有没有不好点击的控件或入口，

边做边检查，是否漏了什么，看这些有没有，要不要标，有些位置放中间的、一目了然的就不标了，特别注意位置，要考虑这个UI图由手机变成平板ipad的效果，别标死了

背景：底色、透明度

控件：尺寸、大小、位置的高、位置的边距、描边的粗细和颜色）、颜色、文字(大小、位置和颜色）、

形状：圆角、尺寸、粗细、位置或边距、颜色、透明度、描边、

文字：边距、位置、颜色、大小、变化了没有，其中有没有两种不同大小的字

感觉是全标注完再切图比较好，为了能够都检查完、少反复、集中解决节省时间。

切图：

一些代码写不出来的或是写出来比较麻烦的 图标就需要切，ios分两种二倍图和三倍图，分别给4、5、6、6s、7都是二倍图，6 plus和7plus是三倍图。android是四种尺寸，320*480，480*800，720*1280，1080*1800，现在主要用插件，设置好，输出比较方便。