产品页面设计的38原则

在产品开发的过程中，UI设计会由专业的设计师操刀。但是，产品的第一负责人——产品经理——会决定设计师设计的页面是否可以交付程序员进行开发。因此，掌握一定的设计原则，对于产品经理的工作来说，是必不可少的加分项。为此，我总结了产品页面设计的38原则，分为3个部分、8个小点进行阐述。

页面设计，需要考虑页面与用户交互的整个过程，即用户进入页面、查看页面、寻找操作目标、操作等部分，各个部分会呈现不同的要求。

一. 进入页面时，等待应该尽量友好：

用户最满意的打开网页时间是在2秒内，如果等待12秒以上，网页还是没有载入，99%以上的用户会关闭网页，不过，研究表明，通过进度条等手段可以将这个时限延长到38秒。因为进度条会让人们有一种即将实现目标的成就感，让人们有动力完成进度，有趣的进度条还可以缓解等待时的无聊感，因此，在进入页面时，如果无法快速地完成加载，不妨做一些有设计感、有趣的加载样式，就像海底捞的留客措施一样，防止用户在使用服务前流失。

二. 呈现给用户的页面，应该尽量美观：

1.保持内部设计的一致性

完整的PC或App产品，往往会有很多的页面，就像人的身体有不同部位，但穿衣时应当尽量保持三个主色调一样，单个产品有限的范围内，也应该确保不同页面的字体、按钮、色调能保持一致，以使用户感到产品非常标准、规范；

2.拥有让用户WOW！一声的质感

用户在深度使用产品前，所能观察到的就是产品的视觉界面，吸引人的设计可以极大提升用户对产品的好感，让用户第一时间觉得满意。主流的设计方式、色彩搭配在不断地演化，日常接触到的各种页面也越来越漂亮有质感，在这个颜值就是一种生产力的时代，通过渐变、投影、荧光色、适度透明等方式，以及微妙的动效，提升画面的质感，能够让用户在第一时间被产品吸引，并产生信心；

3.页面有层次和节奏感

每个页面都会有主要模块和次要模块，主要模块是用户进入当前页面的核心目的，也是页面信息的中心。这部分的内容需要重点突出。

不同层次的功能和信息可以通过位置、颜色、大小等排版手段进行合理组合

（1）彼此不同的内容可以使用空白或轻微的背景色进行区分，而非线条。当前主流的板块多使用圆润的边角，相比刚硬的线条，会使产品更有亲和力。另外，也要考虑到，在颜色之外，最好是通过不同的字体、距离划分来代表不同的内容。因为，9%的男性和0.5%的女性是色盲，最普遍的是红绿色盲，无法分辨红、黄、绿色。仅仅使用颜色，未必能使所有用户明白页面元素之间的差异性；

（2）彼此高度关联的内容，排版尽量紧凑，用排版表达相关性，使页面错落有致；

4.页面内容清晰简洁

移动互联网趋势下，用户的主要操作终端为手机，在手掌大小的屏幕上，操作范围有限，用户也不会愿意在单一页面一直下拉，因此，单一页面能够承载的文案、视觉元素、功能有限，最为考验设计的功力。因此，务必只显示用户当前需要的信息，仅突出最重要的元素，弱化其他元素的视觉效果，避免信息过载给用户带来压力。

三. 用户在页面操作时，确保使用简便、防错、防呆、可控

1.操作便捷，无需思考、记忆：

（1）主流程上的重要功能：显示清晰，能够自解释，尽量避免让用户通过阅读大量文字进行学习；

（2）主流用户很少用，但必不可少的非重要功能：尽量隐藏在次级页面中，只在合适的时机、位置上显示。也避免这些功能影响用户完成主流程。比如在结账环节，往往会删除其他页面顶部和底部都有的导航链。让用户尽量走完主流程，不要退回，或被吸引去进行其他操作。

2.防错、防呆

（1）在用户犯错前：用足够的提醒和设计，避免用户遇到混淆、犯错、发呆的情况；生活已经如此艰难，产品再给用户制造挫败感，就太残忍了；

（2）在用户犯错时：用简洁、清晰的提示，让用户明白哪里出错了，这时候能做些什么，不让用户产生困惑和迷茫感；

3.让用户有控制感

（1）在用户使用的过程中，要给用户主动权，让用户自己把控产品运行的状态，不要强迫用户升级、注册，或者使用你想让他们使用的功能；

（2）在产品优化版本时，少做颠覆性的改变，避免破坏用户的视觉、使用习惯。最好进行微改动，通过一次次局部调整完成整体改版。

设计是传递信息的一种方式，好的设计能够帮助我们向用户表达产品的调性，帮助用户更好地达成任务。产品经理有必要多了解设计的知识，形成一定的审美能力。