页面设计原则与技巧

时间：2023-09-03 06:30:02 | 来源：网站运营

时间：2023-09-03 06:30:02 来源：网站运营

页面设计原则与技巧：随着工作年限的增加，越发感受到，好的PM和好的设计师，应该是站在同一阵线上的。一个页面的体验和美感（设计师负责）与一个页面的信息量、信息架构（PM负责）息息相关。不懂设计的PM是不合格的PM，不懂产品的设计师也不是合格的设计师。

上一节，我们举了很多实例来辅助我们学习一些设计原则，学习如何设计友好而易用的界面，这一节，我们继续来讨论相关的问题。

信息量太大，页面怎么摆？

作为崇尚极简的设计师，信息量太多，无处可放，严重影响了界面美感。

设计师没办法控制界面信息量的大小，多少与产品和业务相关。但我们仍要保障受众的接收效果，掌握信息的展现方式，来组织好这些信息。就如同，没有经过组织的页面就想摆满地摊的集市，而经过精心设计的页面就像精品市场，信息量虽大，但井然有序。




1. 接近原则

相邻的元素会在视觉上让用户认为是同一组事物。同一组元素使用小间距，不同组之间使用大间距，让用户一目了然。




2. 差异原则

展现形式不同的元素会让用户认为是属于不同组的，让信息层级更加清晰。类别不同，但展示形式相同会让用户产生疑惑。如下图，新闻板块与视频、图集、专题的展示形式都做了差异化处理。




3. 包含关系

逻辑上有包含关系的要在视觉上进行嵌套。就如同Word，需要给一级标题、二级标题、三级标题、正文等使用不同的样式，让层级结构一目了然。设计界面的时候，设计师也需要用视觉语言，让页面层级关系不言而喻。如下图：




4. 增强对比关系

弱化非重点信息，强化重点信息，使界面的重点信息“跳出来”。如下图，电商网站的评论模块。对于商品评价，用户最先想要看到的是商品的综合评分，看到感兴趣的内容，用户才细细查看评论内容。所以该模块的设计，通过加粗评论标题，给评分星级增加鲜艳的色彩，将评论字体颜色明度降低等方法，来让重点信息“跳出来”。

又如下图，Gmail收件箱界面。对于用户来讲，未读邮件是需要首先被看到的，所以增大文字和背景的对比度，同时加粗文字着重强调。而已读邮件是用户已经阅读过的，可以弱化显示，降低文字和背景的对比。







5. 将次要信息隐藏

根据二八原则，80%的用户仅使用到产品20%的功能。也就是，设计师不该将那80%不常用的功能重点展示。为了避免干扰新手和中间用户使用，我们应该将次要信息隐藏起来，待用户需要时再展示出来。如Google的主页，将不常用的功能放到更多里。将专家级用户才用的功能放到下一层级的页面中：




Google应用商店也使用了这一技巧。当鼠标悬浮在某个应用上时，会显示应用的评分、简介和添加按钮、分享按钮。当用户觉得这是我想要的，可以快速通过添加按钮将应用添加至Chrome浏览器。

该页面起到的作用是 “快速筛选、激发兴趣”。如果展示的信息太多，用户浏览起来会很累。如果展示信息过少，用户看到某个兴趣点之后，需要进行点击，到新打开的详情页去判断了解详情，判断是否是他想要的东西。多一次跳转意味着用户的流失。而Google的设计者应用这一技巧，巧妙地将两个页面的内容融为一个，平衡了信息展示的利弊。

感性的界面 VS 理性的界面

通过产品定位、需求采集与分析、撰写需求文档、信息分类与组织、导航设计、任务分解、绘制界面草图等一系列理性的步骤，我们终于得到了界面雏形。但在细化具体的界面时，我们又常常纠结于细节无法自拔。比如：图片大点还是小点？按钮放左边还是右边？

为什么会出现这种状况？这是因为在做设计的过程中，设计师需要用到不同的思维方式。在以上的设计阶段中，只有你的设计思路是清晰的，你给到用户的指引和操作路径才可能清晰。而在绘制界面细节时，设计师又需要使用偏感性的思维方式。因为用户在使用产品时不会可以思考背后的逻辑，而是通过感觉来判断你的产品。




印象是第一位的，如果你第一眼看到的界面并没有吸引到你，那么你可能会离开这个网站，即使这个网站所有的操作流程都设计得非常流畅，用户也没机会使用了。




以人为本的设计理念

做设计，要至始至终考虑到用户的使用情景和心理感受。如下图例子，淘宝的收藏夹和购物车页面内容类似，都包含图片、商品名称、价格等。如果按照正常逻辑来处理，两个页面的设计样式应该是类似的。有的电商网站甚至把这两个页面的样式设计成一模一样的，但为什么淘宝的收藏夹和购物车却又很大差别呢？

这正是因为考虑到用户的使用情景和心理感受。如果用户对商品感兴趣，但又不急于购买，就会倾向于把商品加入收藏夹。如果用户的购买欲望较强烈，就会倾向于把商品加入购物车。所以，收藏夹适度突出图片、评论、人气等去吸引用户购买，购物车则尽量简洁明了，不过多干扰用户，仅陈列商品、价格、购买数量，方便用户迅速下单，完成支付。

帮助用户找到想要的东西

信息组织与分类的目的，就是要让信息易于找寻。让有明确目标的用户，能够快速找到所需信息；有不确定目标的用户，通过浏览和寻找，一点点明确自己的需要，最终找到信息；让没有目标的用户在探索中激发需求。互联网产品中信息的组织与分类，要满足这3种情况。

如下图ebay首页，有明确目标的用户通过搜索找到特定商品，对于有大概目标的用户通过左上角的商品分类，在特定类目中寻找商品，而对于没有目标的用户可以浏览最近热销或有折扣的商品，激发购买需求。




新闻资讯类网站也同样如此：




吸引无目标用户

对于无目标或目标不明确的用户来说，我们不能再用理性、逻辑的思维方式来对待他们，而是要充分换位思考，用感性的方式来给他们营造贴心、友好、有吸引力的界面。

以下是新浪微博的登录界面：




对于有明确的登录或注册需求的用户来讲，界面逻辑清晰，没有问题。但对于不了解新浪微博是做什么的用户来讲，既想了解又懒得注册的用户，这个页面的内容完全无法吸引他们。




而本站的登录页，在最显眼的地方提供了登录框，下方则推荐了高质量的用户和画图，让用户没有注册时也能够对本站了解一二。从产品逻辑上来讲，登录页的任务就是让用户完成登录，一个简单的登录框即可，如果严格遵守产品逻辑，内容推荐也许不会出现在这个页面上，无目标用户也很难被吸引。




改版前和改版后的Flickr注册页，哪个界面逻辑更清晰呢？显然是改版前，清晰地展示了注册按钮以及注册后所能使用的功能。但哪个更吸引人？




符合用户的心理模型

下面两款用户天气应用。第一款似乎更加清晰，用最大的数字表示天气情况，用户理解起来应该不存在任何问题。但第二款通过颜色的变化和数字的高低，让用户直观地感受到了天气的变化趋势，仔细观察还发现，界面背景有向下波动的波纹，可以让用户更贴切地感受到气温在下降。




用户不仅有理性，更有感性。过分关注逻辑可能导致设计偏离用户目标，最终导致易用性受到影响。逻辑正确的产品保证产品可用，只是未必好用。平衡好理性和感情，才能设计出友好而易用的产品。


以下举例更多情感化的设计案例。

网易云的部分拟物化，抽取老式播放机的唱片和唱针：







使用色彩表示晴天雨天：




仿造抽屉思想的弹窗：




宠物电梯按钮，有带宠物就按上（以免有人受到惊吓）：




Quora登录时的贴心设计：




邮件提到 “附件” 两个字时，会在发送时，提醒邮件中没有任何附件，确定发送吗？




微信和Google的惊喜：




情景的烘托和带入，Ben The Bodyguard 是一款保护手机隐私数据的iphone应用：




说明：该系列教程主要来自对《破茧成蝶》的总结，感谢刘津和李月前辈！