给开发看的 UI 设计

前言

前端开发，为何需要学习UI设计和实践套路？

做好作品

而现在市面上，已经有足够多的课程，能够让前端以「全栈」的姿态独立开发一款能用的产品出来。但当页面模块变得复杂起来时，仅仅依赖一些 UI 组件库，已经不能让产品维持在「用户体验好」的状态。追求极致的「全栈」定义，或许应当包含「设计」的角色。

没有专业UI帮你

你的团队里可能会有 UI 角色，但不一定专业。UI 给出的设计稿，许多时候只是静态的、仅体现某一交互切面的。很多交互体验细节，只有在前端摆弄一个 Button 的位置和多场景状态时，才能被捕捉到。无论大厂小厂，许多 B 端产品时没有专职 UI 的角色的，前端可能要对产品最终呈现出的形态交互体验负责。

一、功能导向

功能导向可以说是设计中最重要的事了，可以说，把功能做好，或许是才是最重要的设计原则。

Google 首页变迁案例

Google 近20年来首页的变迁，从左到右，分别是1998、2005、2015年，如下图所示：

2021年的首页相比以往更为简洁极致，突出搜索功能。如图所示：

从上述例子，我们明白了设计的第一步，就是交付功能。

简约设计

有了功能基础之后，我们就可以来画原型了，简单设计就好。

用简单的创作工具

我们可以选择像纸、笔或者excalidraw这样可以立刻上手的工具是比较好的。糙一点的设计笔触可以让你不会过于追求完美，或者说是过于「追求设计」。

我们应该要迅速把框架搭好了，设计细节可以后面再补充。说白了，「功能优先」始终贯穿在设计 & 开发流程中。

当然，你也可以使用如 figma 、 Axure 之类的更专业的原型设计工具。但作为开发，建议先使用最基本的笔触和组件，克制使用颜色设计简单的、完整的功能优先关注功能。

设计简单的、完整的功能

我们在进行功能设计时，要先以 MVP 版本功能来作为设计目标。所谓 MVP ，即 Minimum Viable Product ，即最简化可实行产品。
我们来看一个留言评论的例子：

• 一个联系人列表，是否要考虑超过 2000人的展示情况？如何优化交互？
• 数据不存在时，根据不同的错误情况，应该如何准备错误信息展示，和用户引导？
• 一个图片上传模块，其复制粘贴、拖拽、 点击选择文件上传，这些路径是否 MVP 版本都要做，是否都要先做好布局和引导设计？
• 在开局期间，我们要时刻提醒自己，优先把用户关键路径上的主流场景设计完成，迅速迭代其基本具有的能力。
• 这就好比开发一个游戏，我们总想着游戏各种花式的玩法。但我们在开发前应该先考虑的点是，如何先让游戏开始，这就是最简单的功能。让游戏开始了，我们才能给后面的内容迭代和升级。
  

二、设计原则

1、层次

层级，是你可能唯一需要关心的原则。
如果要从「维二」变为「维一」重点功能，那么层级区分，就是你最需要掌握的原则和技巧。

• 一个产品要好用，就要让用户很容易地，抓到产品重点。
• 在重点里，用户能自在地进入沉浸式阅读、和使用的状态；
• 当用户想探索其他内容时，ta 能轻松地识别网站的次要板块还有哪些，焦点能迅速转移，并迅速沉浸；
• 辅助提示信息，精确而又不会打扰各主要模块的呈现。
  
  

上