用五年经验换来的，超实用 UI 设计四原则！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

从少年到大叔，只用了5年，还记得我刚入职的第一份工作的导师和我说：「设计没有什么捷径，有的只是多看、多想、多做，逻辑思维明确了，思路清晰了，累积多了，项目方案就好解决了」。在5年的工作中，也累积了一些心得，下面就和大家聊聊我对 UI设计的几点心得和一些启发。

文章目录

• 多想、多看、多做
• 思维清晰
• 逻辑流畅
• 沉淀积累
• 总结

多想、多看、多做

1. 产品思路要吃透

详细地分析需求，能让设计师更好的把握产品的思路。多看需求中交互或产品给出的产品流程图，在初步的交互结构图中，可以根据需求大致的构造页面的布局和排版，把页面内容布局和排版记入心中，为整个项目打下一个埋点，为将来设计创作时找设计参考打好基础。

2. 换位思考很重要

分析需求时，需要更多的站在交互或产品经理的角度上去看待问题，多看交互流程图，多想产品的逻辑思维，消化交互（产品经理）的整个产品引导意向。例如之前小编做过的一个案例，项目为智能家居管理和操控的 APP，在页面里有搜索框，但是基于公司本身的业务和硬件接入最多就二十个左右，两三屏的滚动查看就看完，对于本身的搜索意义不大。但对于产品经理，在产品的延伸性和前瞻性来看，这功能必须要有，所以了解了产品的意图和产品经理的思路，我做出了如下的修改：

把搜索框隐藏起来做为按钮，当用户需要时点击按钮，跳出搜索内容界面，这样就可以把屏幕空间多留给主要功能展示，同时让页面布局严谨不零碎。

思维清晰

1. 分析用户使用人群

我们在做产品之前，首先要分析产品内在需求和使用人群，为了更好的对用户动机深挖，最好搭建产品架构分析图和目标用户动机分析图，这样带逻辑性地去分析，对于我们前期做设计推导和产品初步的风格落实起到更好的数据支撑。例如下面就是我们团队对于现有的一个 APP 功能深挖的分析图以及一些目标用户的行为分析。

把一些点列出来，预估会发生的事件，预估我们产品因为事件的走向，以及功能使用场景指向等发生的事件都例举出来，这样对于我们定义视觉风格时更利于站在用户角度考虑用户需要什么，我们设立的风格对用户行为动机产生什么影响。

2. 分析产品功能属性

对于人，我们往往根据他的性格、年龄、打扮，职业等，给他贴上标签属性。例如一个女生打扮性感，我们会给她贴「御姐范」。年纪小打扮可爱的会贴属性「萝莉」「软妹子」。同时我们产品也是有对应的属性之分，一个产品往往根据自身主打功能来归属他的标签属性。例如产品有专属与固定职业使用的我们称为工具类app；有分享、语音、人与人之间互动的我们称为社交类app；集采购、买卖东西的我们称为电商类app。这些种种的类别属性划分，在这个类别下还有细分属性的划分，我们往下延伸引导。例如这个app是社交类的，那它的主打是「男性」？「女性」？「两性」？「老年人」？「年轻人」？如果确定是女性那主打的是什么年龄层次女性，是「15-25」？「25-35」？「35-45」？这些等等的往下细分属性，面对­­这样我们可以用一个思维导图分析，深入剖析我们想要的数据。

这样一层层深入挖掘分析，最后合理的得出使用人群的偏好、属性、使用场景，这样带逻辑的一层一层往下走对于我们定义一款新的 App 产品的设计风格有更明确的指引作用。

逻辑流畅

1. 把握页面节奏

音乐节奏会带动人的心情高低起伏，那么什么是页面的节奏呢？我们说页面的节奏是指我们页面布局怎么去分割，给予用户什么样的视觉体验，让用户第一眼看到什么，第二眼知道有什么，第三眼发现什么，都是我们视觉思路明确带着用户去体验的。

在层级关系上，我们要拿捏规划好，主推功能内容和附带功能内容还有运营需要达到什么效果，都是需要明确的思路带用户往下走的，下面是小编之前做过的一个案例：

公司的主打产品是硬件销售，而且明星产品是路由器，所以才衍生了这个共享Wi-Fi app，我们硬件用户基数比较大，所以主要是购买了我们的路由器都可以下载这个 app，把自己家多余的 Wi-Fi流量分享出去得到一些报酬。

在表面上我们看似是一个共享功能的app，其实我们的潜功能目的是为了通过 app 把用户导入商城购买硬件，所以在主要页面上我们把广告位特别突出，弱化了主要的连接功能，让用户使用连接功能时先看到商城优惠信息，同时文案引导去连接Wi-Fi的用户，让其产生疑问「干嘛不自己再买个路由器去分享Wi-Fi增加收益」的心理动机，所以在页面视觉上我第一眼让用户看见广告，第二眼知道有Wi-Fi连接功能，第三再发现怎么去使用我们Wi-Fi功能，这样一步一步让用户跟着我设计思路的节奏走。

产品逻辑思路明确，用户就会知道他处在当前位置应该操作什么，下一步该做什么。

2. 尊敬交互逻辑

在比赛上，我们说要尊敬对手，其实在共事中，我们也需要尊重交互设计的交互流程图，不要随意更改交互逻辑，如果产生歧义要合理沟通，找解决方案，所以这时候我们在前面讲到的在产品分析上吃透产品需求了，可以从产品上出发和交互探讨，目的达到一致才可以更改。如果我们只是为了视觉上的效果好看而去更改交互，让整个 app 交互处于不流畅、不合理是不对的。

小编曾经碰到一个刚转型的 UI设计师，因为页面有很多选择项的功能，需要一一选择点击弹出不同弹窗给用户选择对应的内容，因为选择项的功能比较多。在页面布局上不好对齐和平衡，结果他把几个不同功能选择的弹出组件合成一个，在弹出选择的组件上加选择项分区，这样做后在用户角度上，用户选择了第一个功能选项却把下面的未知功能都选择了，模糊了用户当前使用位置，让用户陷入了不知下一步怎么操作，怎么往下走，这种交互中断的UI是不合理的。因为现有的app，很多用户的使用习惯已经完成惯性的逻辑思维，我们想创新交互，必须在现有的基础上改良或修改，而且是必须合理的，这样才不会让用户在使用产品过程中产生疑惑或焦虑。

在视觉设计时，我们设计师应该跳出设计思维的误区，不要想着我们设计把页面做好看就可以了，其他的不是我负责的就不管了，往往这样是错的，把页面做得好看是我们的基本责任，把页面做得好看又好用才是我们要达到的最终目标。所以我们设计师应该多学习交互逻辑和熟悉产品思路，这样做出来的作品才是有灵魂的。

3. 规范细化

规范对于我们设计的核心就是灵魂，视觉上游对接交互（产品经理），下游对接开发人员，它都起到阐述设计的规范化、统一化，让外人可以读懂我们设计的逻辑思路。

规范细化在交接工作中也会起到高效率的沟通对接桥梁，所以在设计好页面时我们应该细化地整理输出一份设计规范，规定「标题」「副标题」「正文」等一系列共同使用的组件的大小、状态、间距都是有共通性，逻辑性的，这样开发在写页面过程中知道我们设计规范里的共通点，在实现页面中就会有底，知道注意哪些点的字号用多少，间距是多少等等，我们后期验收工作也会减少很多劳动力。同时在我们设计与程序之间慢慢地建立合作默契，完成以后工作任务也达到事半功倍的效果。

沉淀积累

1. 关注用户数据和反馈

项目的上线不意味着我们的任务已经完成，打造一个优秀的app 是要不断地迭代和完善的，app上线后真正的接触了用户，用户的使用数据和反馈才是检验我们劳动成果的最真实证据。

上线后我们设计需要多关注用户的使用数据，关注功能点击率和留存率，多查看app商城用户评分，认真看反馈的评论和后台收集的用户意见，这些最贴近用户的真实反馈，累积下来处理，是我们下次迭代的动力，这样一步步根据用户的体验去优化的产品，才是真正意义上的一个优秀app产品。

2. 做好项目总结

所谓总结写得好，加分又加奖，设计师必须把自己做项目的设计思维表达出来，把自己设计中所踩的坑、埋的坑，条理分明的例举出来，避免下次迭代和其他项目再犯同样错误，同时项目亮点也可以记录说明，这样下次再做项目，吸取之前的成功经验，避开踩过的坑，更利于我们做好每一个产品，提高工作效率。

总结

以上几点是小编在工作中血与泪的教训得出的经验。UI设计与其他视觉的区分可能就是更多的考虑可玩性、使用性、耐用性，比视觉第一冲击力还重要。

欢迎关注作者「京东设计中心JDC」的微信公众号：

「团队协作的沟通法」

• 《提高效率！如何避免团队协作中的无效沟通？》
• 《需求一直做不完？试试这个需求沟通和分析方法！》
• 《设计师如何有效参与团队协作？来看支付宝设计师的总结！》