LNKS 的设计原则

这是公司内部产品团队的设计原则，分享给大家。

流程清晰：设计的第一原则，就是需求的理解要透彻，要根据真实用户需求画流程图，流程图的逻辑要清晰，这样研发实现有章可循。这一步要做到最好的方法就是，第一遍流程好了以后，反复在脑袋里想每个流程，是否还有精简的可能性？质疑每个流程是否有存在的必要？最好的流程是最少打扰用户的流程，如果能做到预测用户的意图自动做，那就更好了
颜色：白色背景给人很干净的感觉，如果要和白色做大范围的对比，尽量用偏蓝的白色，通过比较低的对比来衬托区域，不要直接用灰色，灰色只能在 Mac 或者三星屏幕下才能有很好的还原，一般的屏幕，灰色会更加深，让人联想到水泥、旧和脏的东西。如果真的要用灰色，尽量在小范围用。黑色主要用于边框和分割线，一定要注意黑色和其他颜色挨着设计，尽量不要用半透明的灰色线叠在背景上，灰色显得脏。界面主色，如果颜色比较鲜亮，避免大范围用，比如确定按钮，添加按钮点缀一下即可。注意搭配色，不要红配绿，一个界面不要超过三个颜色，太多颜色会导致注意力分散，用户不知所措。
整体性：界面整体性很重要，注意的点无非就几个。不要画太多分割线，优先用视觉对齐分割，其次用色块自然分割，最差用线条分割，线条分割一定要慎用，比如只有左右分割用一下，但是一定不能界面到处都是蜘蛛网的分割线，Low。按钮比较多的时候，按钮的背景和界面背景对比不能太强烈，避免一堆 “补丁“ 粘在界面上， Low。控件风格的一致性，留白的一致性，细节处要统一，整体上要通透。什么感觉，设计完了，在 1~2 米远的位置，像看油画那样看设计图，如果远处看都觉得整体呼吸感很舒服，那就对了，如果远处看，觉得某个地方乱，就要注意了。
控件规范：控件的规范的心法是，尽一切可能少切换用户的焦点和打断用户。简单来说，尽量不要弹出对话框，尽量不要用下拉列表，尽量不要用标签，尽量不要用折叠菜单。这里注意的是，如果有方法可以直接铺开就铺开，这样方便操作。对话框、下拉列表、标签和折叠菜单都是切换用户注意力的地方，不是说不用，而是少用，滥用的好处是产品和设计师很轻松，坏处是用户操作麻烦。不同控件都有操作习惯，不知道怎么用的时候，就看一下 PC 上 Windows 和 Mac 的设计，尽量符合这两款操作系统的习惯，不是说 Mac 和 Windows 就是最好的设计，但是尊重用户的习惯才是更高的境界。右上角的地方，只有非常不重要的东西才放那里，不要把重要的功能放在右上角藏起来，藏功能是偷懒的做法，会有非常大的售后成本。
留白是最大的艺术：一个好的界面，让人舒服要注意几个细节，行间距要合理，太紧凑了就阅读累； PC 界面阅读文字，文字内容要居中，两边留白，中间比例 0.618 黄金比例最好；整体的界面呼吸感很重要，怎么把握？把界面当成一个弹珠游戏的障碍迷宫，想象一下一杯水从界面顶部往下倒，如果水流的越通畅，就证明整个界面的呼吸感很好，如果哪个地方有积水或者流的慢，那个地方的布局就要重新考量了。
渐变色：渐变色深色不管上下拉渐变，还是斜拉都会比较有质感。但是一定不要用蓝色、红色或者其他颜色和白色半透明拉渐变，那样会导致颜色不正，颜色整体发灰，整体界面变得很脏， Low。
Padding：关系近的 Padding 小一点，比如网盘文件名和左边的复选框。关系远的 Padding 大一点，比如网盘文件行两边的留白。 Padding 要注意倍数和规范，比如 8、16、24、32、64 这种，不要中间搞非主流 Padding，比如一会 24，一会 35 这种，界面复杂了，用户能感受到 Padding 的混乱，但是又说不上哪里怪。
列表：列表类控件，尽量避免一列按钮从上铺到下，那样密密麻麻看着复杂。尽量 Hover 上去才显示交互按钮，这样默认列表看起来干净很多。
选择：设计团队最切忌就是上帝模式，自己想过千万遍流程，觉得流程特别合理，但是用户一来，不能通过文字理解没有显示的后台逻辑。所以当做选择界面的时候，不要去跟用户去解释每个方案，而是要想尽一切办法，能够明确每个页面的 ”推荐“ 按钮，让用户无脑的跟着下一步，看都不看直接点就是更好的选择，这才是好的设计。
文案：好的文案就是角度问题，差的文案就是除了自己知道啥意思，用户肯定不知道。所以写文案的关键是，写完以后心里默读几遍，看看从用户的角度是否能懂？不要用作者视角写文案去解释，要从用户视角去理解 ”你要我怎么做？“，和上一点一样，告诉我怎么做，不要告诉我原因是啥，我不懂。
页面适应性：这个时代，PC 端和移动端要同时适应是标配。 PC 端的页面要考虑居中两边留白，不要左右顶满，用户眼睛左右横扫累，还要考虑屏幕变小的情况。同时移动端因为屏幕变小，所有 PC 端很容易的控件，移动端都要考虑屏幕宽度，比如 PC 布局丰富的地方移动端要做成上下结构，或者左右滑动，或者多层页面结构。复杂布局在移动端会导致用户看不清楚，操作不方便。
对话框：右上角的关闭按钮，要离右上角足够近。底部按钮要和中间内容间隔大一点。中间的内容比如就是一个输入框太单薄，就作一个图标衬托一下，一般警告和提示类的，大图标在上面，内容控件在下面。如果其他揉合型的交互，可以小图标在左边，内容控件在右边。对话框的对齐是一门学问，要多练习。
进度条：尽量优化页面，页面加载没有进度条就最好，如果实在要有进度条，要不就是页面顶部细线条，要不就是页面中间 Loading 动画（要注意动画要统一），加载不了的时候，要提供给客户重新加载的按钮。这样方便点。不要在界面右上角搞进度条，非主流的设计。
设置界面：居中放置，从上到下，用线框居中框住，然后内容在线框中左右对齐，左边是标题，右边是不同控件（比如开关、选项等），这样整体结构要稳定得多，而且国际化翻译也好做。
手机操作: 手机最方便的是右手大拇指的 1/4 弧度半径的区域，尽量不要把按钮放在顶部，单手操作不方便。手机尽量是简单页面，多层级设计，尽量避免在手机上放置复杂布局。
草图设计：尽量用白板和白纸绘制，减少流程图软件的依赖。因为白板和白纸没有那么大面积，所以会逼迫设计者简化设计。流程图软件太强大，会倾向于做更复杂的设计。