前平安科技PDC高级交互设计师李雨晨：产品UI设计快与慢

说完这个，有一个很有意思的地方，很多设计师画草稿，画着画着就撕掉或者扔掉。这是非常不好的习惯，比较资深的或者有经验的设计师会把这些都保留着，从第一稿到最终稿都留着，这也是设计思路的过程，也是思维平时培养的方法，这是一个非常简单的方法，但是你用得好，达到的效果是不一样的。你把第一稿画好了之后，觉得不满意，扔掉了，第二个画好不满意，又扔掉，那你只留了最终一稿。前面几稿精华的部分，或者灵感可能就是那一瞬间，在第一稿呈现的时候你没有抓住，第二稿你又扔掉，之前的一稿就不知道了，没有每一稿的比较每一稿的积累，无法形成最终一稿的完美。这就是我们常说的原型稿的积累和设计思路的呈现。像展览，每次展览中最丰富多彩的部分，就是设计师或者艺术家，把自己的手稿跟设计思路全部以文档的形式或者是草稿，甚至是一些视频的形式呈现给大家，以一种多维度的视角把这个过程和想法呈现给他的观众，这就是他自己的设计思路的展现。同时也是对于自己设计过程以及落地过程的记录，应该是一个双向的过程，不光是对用户能够很快的理解他是怎么想的，马上能切换到艺术家当时的情景跟状态，那么对于这个艺术家自身来说，是他自己不断积累的过程。

工作经验，为什么列在计划这一部分，因为有多少工作经验就可以避开以后工作中的坑。项目经验，这个是一定要讲一下，项目经验可能大家觉得刚毕业的同学，可能会跟我一样，觉得没有太多项目经验怎么办？没有关系，项目经验这种东西，每个人都是一样的，每个阶段每个阶段的项目积累和分析，如果刚起步的时候，可以把自己在学校中参与的那些设计，比较完整的这种设计，从前到后的那种，然后自己参与度相对较高，作为一个项目。把它看作自己的一个项目，应该说是一个起始的项目，是一个起步阶段，算是一个小项目。对于你刚开始做的作品，以及这个过程的环节去总结，其实就是通过这样一个反思的过程，把它变成自己的经验。其实这样一个过程是非常重要的。很多同学觉得，做了很多东西，但是其实都不能称之为项目。但是在我看来，无论做的是大是小，只要是这件事最终能够达到目的，只要你的设计能够完成需求方的要求，达到他的认可，对你来说它就是一个项目，只是小一点。但是对于你来说，你只要总结了反思了，自己在中间发挥了多少作用，它就是一个项目，这种东西是可大可小的，但是作用是不一样的。总结跟不总结，效果是天差地别的。

落地阶段是这样几个可能涉及的环节，设计评估，需要对设计做一个简单的评估，比如这个要花多少时间，有多少成本，或者只是电子稿就可以搞定，那就是电脑一台，花费的时间就是几个小时。如果要印刷，就要评估一下是不是要做测试稿打印稿，打印几稿时间成本就上去了，费用成本也上去了。自我管理，如果不做自我管理把这些东西落地，落实的过程中总是突发状况，或者逛逛网站回回微信刷刷微博，这些都浪费你的时间，这就跟时间管理有关。一天的时间怎么安排，把自己最好的经理，比如四点到六点这段时间是每个设计师最精华的时间，怎么安排。还有设计执行，怎么去执行。

后面精华的部分直接，刚才的地方已经讲得差不多了，听了这么多有没有什么想法？然后是团队协作，这部分讲完了。

总结的话，整备加计划加落实等于提早下班或者按时下班。这个是我总结的一张图，你可能从小白阶段，在学校没毕业的时候就开始积累自己的各种素材，或者是设计经验或者项目经验，它走的是红色的这块，经验跟方案是不断的积累，不断的呈上涨趋势。设计执行，这一块就是每天花费设计时间，可能在刚起步阶段，可能花费的时间，一天，都是在做设计执行。无论是做草稿、原型或者是反复改稿，都属于这个部分。到了中级阶段，设计的执行时间就会相对下降，因为你的手速会越来越快，落地能力越来越强，思维越来越敏捷，可能花的时间越来越少。但是经验和方案都是不断的往上提升，包括素材库，都是在这一块。大家会看到从这个趋势上来看，越到高级越往资深走，设计执行的时间会越来越短。可能有些人到了高级之后，做了总监之后就不用做执行了，完全把自己的思路呈现给自己的伙伴，给团队中的设计师，让他们做执行，自己只是做一些idea，出一些idea就好了，做一些指导。

这样一看就认清的自己到底是在哪个阶段。比如我现在是在这个阶段，那我每天花的时间是这些。那其实是可以通过一定的方法去把这个时间大大缩短。因为设计执行很多时候，为什么我要把这个图画出来，因为大部分处于这个阶段，但是有没有想过可以通过在设计整备阶段，把那些时间全部覆盖掉？比如改稿或者是不断的去画那些草稿的时间，我都可以在平时就做起来，设计思维包括设计的方案，都可以平时积累起来，时间就会大大缩短，效率就会比别人高，加班的可能性就比别人小。

看上去每个人的工作是为了什么？为了赚钱，结果很重要，每个月15号或者5号发钱很重要，过程其实更重要。

刚刚讲的是这个部分，平时修炼，关键发挥。

现在大部分的设计师，特别是起步阶段，怎么判断自己的作品好和坏？很难判断，到底是做得好还是不好？只是好看，看上去感觉不错，为什么到需求方那里就被批得一无是处，什么都不是，反复要修改？

几个方法，UE设计师，肯定是好用、逻辑清，交付稿才会更受认可。UI设计师是不是好看、酷炫就可以了？Code，就是程序员，简单不出错，这是他们的美。三个不同的职位，判断好坏的标准不一样，UI设计师的标准到底是什么？比如现在感觉不靠谱，因为小白，leader也说感觉不好，一定要有真实的依据，比如参考比较好的作品或者上线的成品作为参考、支撑或者是数据支撑，别人已经做过上线了。经验，我也没有。直觉，没依据，leader可以说我的直觉感觉不错，那我不能这么说，特别是互联网产品中的UI，那些原则必须列出来给大家看一看，有哪些原则。

还挺多的，十个原则，这十个原则经常被反复的强调，而且无论你是在UI或者是UE，或者是用研，这十个原则都非常重要。大家可以拍个照。我跟大家稍稍解释一下，状态可见原则，当前的状态必须让用户知道，比如注册的时候是第几步，是填写个人信息这个状态，肯定要让用户知道。环境贴切原则，符合用户的场景，比如开车的时候，车载系统有一个播放键或者是暂停键，做得特别小或者特别美观却不好找，这跟环境就不贴切，因为开车的时候肯定是高度集中，为了安全性考虑。各方面来说就应该要更好用更直观。撤销重做原则，有些步骤做完了之后就不能改了，这是不行的，比如填身份证的时候少填一位，这是可以重新做的，会提示你少填一位。一致性原则，这个怎么解？就是类似于，打个比方，微信，应该这么讲，那个比方最好，支付宝，从淘宝付款，会跳转一个，如果下载了支付宝的app，会直接跳转到app，之前这个版本是这样的。现在这个版本做得非常好的一点是会直接从淘宝的app中弹出一个框，是支付宝的支付接口，支付完成就好了，不会像以前一样跳到支付宝那里。这是保持阿里旗下产品的一致性的体验。防错原则，就是避免用户出错，还是拿开车这个例子，我在开车中要接电话，特别是我手机接了车载蓝牙在听音乐，我接电话的时候是不是一按接听就直接从音箱里出来？肯定不是，一定是从手机或者蓝牙耳麦，而不是车载音箱。说得简单一点就是避免用户出错。

易取原则，怎么好用怎么来。灵活高效，这应该不用解。易地原则，这是不是打错了。容错原则，就是允许用户出错，用户肯定会住错，还是那个例子，身份证号码出错怎么办？必须得允许用户出错，不能说我提交了之后，错了就错了，直接把之前填的几位都删掉，或者直接把页面刷新了，之前填的信息全没有的，不行，从用户体验角度来说必须全部保留。这就是属于人性化帮助的原则，提供可视的错误弹框信息，告诉用户错了，修改一下就可以。之前的注册网页有没有接触过？填错了，填了一屏的信息整个都没了，重新填，多累，用户体验非常差。这个是谁提出的？尼尔森，有时间可以关注一下。

原则有了，怎么去对我的作品进行量化？原则这么好，怎么用？有一个量化的标准，比如我做了这个引导页这个banner页或者宣传页，怎么衡量？黄色的部分跟视觉的同学有关，就是跟UI设计有关，其他几个部分相对说关键性弱一些。易用性，可见、可靠，可靠怎么讲？我好像标错了，应该是易于学习。易用性，首先这个界面对用户来说是非常好用的，这个好用不光是功能要好用，从它的设计风格上，或者整个布局排版必须是非常好用的，在手机移动端上这个易用性原则特别明显，你是右手习惯的，如果页面上的主触发按钮，关键入口如果是放在非常不好用的地方，就比如iPhone6Plus，放得高一些，拇指短一点的是不是就够不到了。这个按钮就是视觉的同学必须考量的，这个按钮放在什么位置，是考虑右手习惯用户还是左手习惯用户，还是放在中间比较靠下的位置，比较方便80%的用户使用。可见性原则，类似宣传页，或者是微信H5中的比较好看的页面，那些页面肯定是有商业目的的，不论是引流、分享还是赚优惠券，肯定有一个触发区，是不是一定要做得直观可见，而且可以点一下就马上获得优惠？而不是之前，这个例子怎么举，试想一下这个页面非常好看，视觉上非常有冲击力，但是触发优惠码的这个地方，按钮却跟这个背景融合得太好，不那么容易被看见。这个颜色来说，不是苹果手机是安卓手机，颜色不是很好或者是效果没有在苹果，80%的设计师用苹果电脑，没有苹果电脑上效果这么好，那会是什么情况？一定要考虑到是不是非常可见，可以被用户很容易看到而触发，因为它是一个关键按钮。

易于学习，这个原则类似于易用，就是每次页面进行一次大的跳转之后，是不是导航还在那个导航的位置，关键的按钮还在那个位置，比如微信中的返回按钮，跳到别的功能点，返回还是在那个位置，这是易用性。而不是每一次跳转就换到一个别的位置，或者第三级界面就把这个返回去掉了？这要考虑它的易用性。这就是衡量标准。

还有信息架构，可能有点太复杂了，有没有同学听说过？有？太好了。没有听说过没有关系，交互设计和产品经理经常讲，这对于UI设计师必须要知道，不只是前面的那些复杂的，信息的统筹、规划、设计、安排这些，UI设计师可以不用考虑这些，但是必须要知道它的设计跟安排这一块，是我们常要做的东西。用图形化的东西做个比方比较容易理解，这是微信的安卓版本，信息架构是什么？就是这样一个东西，类似于，比如有个低保真图，不论用软件做的还是手绘做的，有这样一个架构，这边是icon，这边是微信的logo，这些是辅助功能，这边是导航，这是它呈现的子功能。这是它的虚拟按钮，这跟载体有关，这个可以不用看，是安卓手机的硬件的关系，苹果手机没有这个关系。这是虚拟按键。它占的屏幕的区域是一致的，安卓大屏的手机，这一块的虚拟按钮都是屏幕内部分。这个就是信息架构的呈现，对于IU设计师来说有一个引导和规范的作用，可以帮助你知道这边是放icon的，这边是虚拟按钮就不用管了，这边是状态栏，我也不用管。只要知道这一块的设计怎么做就可以了。没有这样的信息架构，试想一下工作中的情况，产品经理把需求给到你，却没有提供中间的信息架构，中间这部分全要自己想，那就非常累了，每次沟通的时候这个不对那个不对，就是属于架构层面没有考虑到。架构不对，里面做得再漂亮，icon做得再好，跟这些不一样，还是不行。

（编辑：PHP编程网 - 襄阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!