几个案例解析：如何一步步做出合理的策划方案

人人都是产品经理 2018-08-19 15:01:59

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

做产品方案的时候，我们经常会走进死胡同或者跑错路，最后不论是开发还是市场，对结果都不满意，产品自然就成了背锅侠！但是往往我们出方案的时候，多想一些问题，或许结果就不一样，跟新人交流的时候，发现一些能力需要可以单独训练，有意识的去理解一些东西，长期积累就会有自己的一套解决问题的思路。

1. 辨别真伪的能力

辨别真伪也就是老生常谈的真伪需求的能力，在产品经理的行业里，经常会进行需求的评审，需求的界定，看这个需求是否是真的有效

举个例子

行业：外卖行业

案例：打包费审核的功能

功能出发点：解决商家乱设打包费的需求

解读：如果从这个角度来讲，打包费审核完全没必要，原因有

• 未必所有的商家都乱设打包费，只是个别现象
• 及时设置了打包费审核，后台审核了，也没办法解决，除非后台做强制性的更改或下架商品的功能
• 打包费是商家自主行为，如果商家恶意设置打包费，是给自己添堵
• 如果真想解决此问题，在商家上传商品的时候设置打包费的选项，一个餐品打包费最多是多少
• 或许极个别的商家的打包费真的会比较高，可以在商家管理后台做好打包费配置即可，从源头控制

很显然，要在后台做一个打包费审核的功能，还需要让人专门处理此业务，对系统来说，是降低效率又不见得有效果的，所以，界定为伪需求。那么既然存在这样的问题，可替代方案如下：

1. 商家添加商品时打包费又两个选择【收打包费】【不收打包费】，打包费为行业标准，1元/份餐品；
2. 对于大型的打包盒，比如说探鱼这些商家，打包费可以开放设置（大型连锁或者知名品牌可以认定为不需要通过打包盒来赚取利润）。

辨别真伪的能力不仅仅体现在能辨别出来，更多的是能够用更灵活的方式来解决来自运营、消费者产生的问题，且不增加过多的额外工作。

2. 找到合适定位的能力

合适定位的能力，这个说的有点虚，用通俗的话来讲，就是找个抄的对象。在国内想要做一个App有大量的抄袭模仿对象，各大知名厂商已经做了很多的研究，剩下的就是模仿和创新。能不能找到合适的模块去进行创新，这个就比较重要。

案例1：外卖行业，推荐商家

功能出发点：外卖行业的推荐商家，很多事按照细分的行业来做的，比如说美团跟饿了么的【必吃菜品】【品质联盟】这些，但是对消费者来说，这真的是我想要的选择么？

解读：从消费者的心理出发，我去找吃的，可能出于几点

• 找新鲜：看看这附近有什么新鲜的店铺开业或者新的口味，外卖一个月都是那几家，早就腻了
• 找实惠：外卖分量不够，10块钱管饱的那种最好
• 速度快：能告诉我最快的是哪家么？

其次还有可能

• 这两天身体不舒服，想吃点口味淡的
• 我是湖南湖北人，我想吃点重口味的
• ……

因此，从这类具有标示性的标签入手，会更有效果。此类功能类似于一点点的餐牌设计以及lofter的标签设计，将商家分配不同的标签跟消费者的消费场景对应上，交叉进行推荐，比如说一个商家有很多种口味，那对应的消费者人群也会多，消费者通过对应标签可以快速找到对应的商品，对消费者和商家都是互利的，我们经常会遇到一个外卖店铺有几十种餐品，找半天还是不知道吃啥。

（配个截图，此功能已实现，后续看数据情况，再做追踪）

顺便说一下，之前饿了么有个版本放大对餐品的显示，做餐品的推荐，后来又改回来，具体是什么因素，不确定，但那也是一种尝试。

案例2：荔枝FM飞机稿

出发点：那是很早以前的一个版本，因为不好用，所以就干脆做一个交互飞机稿，当时做的时候有以下几个因素：

• 体验不好，最古老的版本体验非常不爽（详情可以戳这里：http://www.woshipm.com/ucd/209199.html）
• 当时在做交互设计，就尝试用新的交互设计思路去设计

解读：

当时荔枝FM算是国内比较早做电台的，同期出了喜马拉雅听，刚开始也没有荔枝FM那样火，但从交互上，主要由两个点：

1. 模拟电台操作：荔枝FM当时还是走拟物化设计（新进入互联网的可能觉得是历史），那从FM收音机的角度来说，都有一个旋钮，或者是老式的随身听，因此在主页的界面设计以及播放界面设计都有参考古老随身听的样式，既然复古，我们就彻底点
2. 数据整理：在当时做荔枝FM的飞机稿时，主要做的是数据层的整理，把繁杂的内容数据变得有序可循，让用户和博客可以更快找到合适自己的内容

对于合适的定位可以理解为：每个事物或许有自己固有的长相，但或许我们找到合适的逻辑后，只要抓住根本，那最后怎么玩，还是大家说了算，打破陈规，才更好玩。为什么音乐软件就一定要有那么大的播放界面；为什么订餐软件就一定要宣传店铺，不能是商品？

3. 解决问题的能力

这个就老生常谈了，解决问题的能力体现在对系统的掌握程度和开发自由度两个层面，产品经理实质是提供解决方案的，任何需求到手后，我们需要分析如何快速解决该问题。

案例1：招聘面试流程

出发点：销售类岗位进行招聘时，都是一大批一大批的面试，一个人可能同时面试很多岗位，一个公司会面试很多个求职者，因此提率，对求职者和公司都是最大的需求

解决方案：排队叫号，跟银行排队一样，针对这个场景，我们梳理了核心的问题

• 面试人员取号
• 面试人员查看各岗位当前排队情况及投递请求
• 企业招聘人员查看简历并选择是否面试，对面试的人进行初步评论
• 叫号及数据导出

针对以上四个问题，设计出如下流程（省略取号的环节，主要核心的流程是企业的发送通知循环以及面试后的符合不符合操作循环）

从流程图可以发现，核心逻辑并不复杂，解决了通知求职者来面试的需求以及对求职者进行评价需求即可；除此之外还可以做一些其他的功能，如求职者可以看到当前排队情况，根据实际情况进行简历投递，避免出现大量等待情况，可预知自己还要多久可以面试，在这时间内是否可以投递其他公司，进行多项选择；对于企业解决各种纸质简历分辨不清，电子档简历，电子记录每一个求职者和操作，可以清楚知道今天面试记录，电子档案，更清楚，提高双方的效率。

4. 了解数据的能力

对于数据，很多人应该不会陌生，如何从杂乱的数据找到规律，怎么处理数据之间的关系？

1. 一级页面到二级页面的流失率和转化率
2. 每个页面转化功能的设计及数据统计
3. 数据解读

最近在做小程序相关的项目，把腾讯的数据统计贴上来:

访问趋势类：

• time 时间
• session_cnt 打开次数
• visit_pv 访问次数
• visit_uv 访问人数
• visit_uv_new 新用户数
• stay_time_uv 人均停留时长 (浮点型，单位：秒)
• stay_time_session 次均停留时长 (浮点型，单位：秒)
• visit_depth 平均访问深度 (浮点型)

访问分布：

• access_source_session_cnt 访问来源分布
• access_staytime_info 访问时长分布
• access_depth_info 访问深度的分布

访问留存

• visit_uv_new 新增用户留存
• visit_uv 活跃用户留存

访问页面：

• page_path 页面路径
• page_visit_pv 访问次数
• page_visit_uv 访问人数
• page_staytime_pv 次均停留时长
• entrypage_pv 进入页次数
• exitpage_pv 退出页次数
• page_share_pv 转发次数
• page_share_uv 转发人数

总结

产品经理从拿到需求开始就需要对需求进行分解，判断到底什么样的方案可以解决此问题，并结合当前系统的一些功能点，给出最佳的方案；在交互设计的时候是参考竞品还是微创新，就看实际业务需求；最后就是核心业务梳理，一个功能的核心业务是什么，还有哪些可以搭配让功能更完善的，考虑进去，做产品是一个分解、组合、删减、再组合的过程！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

面向中小企业SaaS的权限管理系统

人人都是产品经理 2018-08-19 15:02:17

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文基于面向某个垂直行业的SaaS系统的设计经验，抽象出一套适合中小企业的权限管理体系，目标是最大限度保留系统弹性的同时，把系统复杂度和开发成本尽可能降低。enjoy~

面向企业级的SaaS（软件及服务）系统，由于企业用户的规模和内部管理模式千差万别，设计一套具备足够弹性、符合绝大部分目标企业用户需求的权限管理系统，是一个很大的挑战。

我们可以看到，市面上面向多个行业的综合性SaaS系统，例如销售易、纷享销客等，由于它们的目标客户跨越了多个行业、多种规模，这些企业具备各种各样的内部管理风格和模式，在权限系统的管理上，往往做得非常复杂，不仅具备部门、角色、职位、数据等各个维度的权限管理，各个功能模块还有自己独立的权限管理，虽然具备最大的弹性，却给企业的系统管理带来较大的负担。

提炼的三个核心原则：

• 企业-管理员-普通账号三级权限
• 功能和数据权限分离
• 部门和角色分离

围绕上述三个基本原则，我们力图在满足中小企业需求的前提下保持足够的弹性，并严格控制复杂度和开发成本。详细描述如下。

1. 权限从上到下分为三个层级：企业账号（老板账号）、管理员账号、普通账号

对于中小企业来说，公司的实际控制人，往往是公司的创始人或自然人大股东，因此企业账号的使用者以及对应绑定的手机号码，都是公司的实际控制人，他应该掌握最核心、权限最大的企业账号，所以也可以称为“老板账号”。

但是在实际场景中，公司的实际控制人并不会直接管理公司的业务支撑系统，因此，需要在系统首次部署时，创建好企业账号，并由企业账号授权给某一个或多个系统管理员，由系统管理员去完成日常的角色创建、员工导入等工作。系统管理员，对应的一般就是HR或行政部门的管理人员。当然，企业账号的权限高于管理员账号，如果是小微型企业，也可以由企业账号直接替代管理员账号的功能。

除了企业账号和管理员账号之外，其他各级员工所持有的账号，都属于普通账号。普通账号的部门、角色、数据等权限的设置，一律由系统管理员配置。

三个权限层级示意图如下：

在实际系统中的核心业务步骤如下：

（1）企业购买系统时，创建一个企业账号，这个企业账号绑定的手机号码为公司实际控制人的手机号码。该手机号码必要时可以解绑（例如公司实际控制人变更），由于该功能触发频率很低，因此不需要在前端功能中实现，只需要在购买协议中写明，“购买企业可以通过书面方式提出企业账号手机号码绑定变更需求”即可。

（2）在部署和培训阶段，可指导企业账号持有人创建一个或多个管理员账号，该账号一般授权给行政总监或人力资源总监，后续配置即由管理员账号进行。

（3）管理员账号持有人需要接受系统培训，掌握部门创建、角色创建、功能和数据权限分配等基本操作。管理员所有操作都必须记录在案，供企业账号持有人监督，且管理员操作触发异常行为规则（如大量分配高等级权限等）时，系统会通过短信方式通知到企业账号持有人，确保企业账号对管理员的全方位掌控。

（4）企业账号可随时将管理员账号禁用或设定为离职，但管理员账号不可对企业账号进行任何配置或操作。

（5）企业账号默认拥有所有权限。

2. 功能权限和数据权限分离

功能权限，定义为可见、可以操作的功能范围。例如某一部分菜单，或者某个页面里的各种操作。

数据权限，定义为若干个数据类型里的具体可见范围，例如“客户”就是一个数据类型，它的权限举例如“无权限”、“我的客户”、“我所在部门的客户”、“我所在部门及下级部门的客户”。

通过功能权限和数据权限的分离，我们可以做到以下场景：需要开拓和维护客户的角色集合，都可以拥有“客户”这个菜单的权限，但不同的角色进入“客户”菜单的列表时，看到的客户范围各不相同，极端情况是看不到任何客户。且不同角色在同一个客户页面上，能进行的操作也不同，例如有的角色可以新建客户，有的却不行，这就要由功能权限来控制。

可见，通过功能权限和数据权限的分离和配合，我们在具体的权限分配上有了非常大的弹性，且在技术层面的后台系统的设计上，也非常合理、清晰。

而在具体设计上，需要保证以下4点：

1. 正确区分功能和数据，入口性和操作性的都应该归类为功能
2. 正确对数据进行分类，避免存在分类后的某些数据存在交集
3. 数据分类到多细的颗粒度，需要由行业特性决定
4. 数据权限区分为查看、编辑和删除

示例图如下，由于涉及具体产品，对某些文字进行了打码：

3、部门和角色分离

部门的定义，自然就是公司行政组织架构下的部门。

在本设计方案中，角色等同于职位，而在许多大型的SaaS系统中，为了更大的灵活性，往往会把角色和职位分开，但根据我们的判断，对于中小企业，设定角色一个就够了，职位当然还存在，但仅仅是一个不涉及权限管理的文本title了。

以一个销售公司来说，角色可以包括：“渠道专员”、“渠道总监”、“销售专员”、“销售经理”、“总经理”等等。

所谓的部门和角色分开，就是不同的部门可以有相同的角色，例如如果有渠道一部、渠道二部，则这两个渠道部的员工的角色都可以设定为“渠道专员”，这两个部门的管理者都可以设定为“渠道经理”。再配合功能和数据权限，则进一步配置“渠道专员”具有“渠道”菜单的功能权限，其能够查看的渠道数据权限范围则仅为“我的”，而“渠道经理”同样具有“渠道”菜单的功能权限，但其能够查看的渠道数据权限的范围则扩大为“部门”。

具体设计上：

1. 最大部门即为公司
2. 管理员账号和普通账号均可禁用或设置为离职
3. 不同部门可以配置相同角色
4. 相同角色的功能权限和数据权限是一样的

4. 权限系统和其他功能设计的关系

总结完权限系统三个核心的基本原则后，我们还需要指出一点：权限系统的设计方案，在整个系统中绝不是孤立的，它能否实现设计目标，并和整个系统完美配合，还需要做到以下几点：

首先，菜单和功能的设计，必须是最小颗粒度，否则就和数据权限产生冲突。例如：我们只需要一个“客户”菜单即可，不同角色在“客户”菜单里能干什么事情，由功能权限和数据权限配合进行控制，但切不可出现“我的客户”+“全部客户”两个菜单，这明显和数据权限有根本冲突，且也是一种不优美、不合理、扩展性差的设计。

其次，数据的分类，必须符合业务需求，且划分合理。有些数据都是公开的可以不归入数据权限进行管理，所有角色默认都有即可；有些数据需要进一步细分，例如同样以“客户”举例，在某些公司的业务规则中，就需要将客户的基本信息和联系信息分开控制，管理层可以看客户基本信息，但只有客户负责人才可以看联系信息，这种情况就需要将客户的数据权限分为“客户基本信息”和“客户联系信息”两个。

最后，权限变更的记录和所有账号的行为轨迹记录一样重要。权限系统本质是进行权力的限制，没有监管的权力必定是会失控的。在出现问题的时候，必须同时配合权限变更的记录、角色变更的记录和账号的行为轨迹记录进行追责和存证，确保维护企业的合法权益。

总结

在合理设计的前提下，权限系统也并非越复杂越好。只有符合目标客户需求并具备最大弹性的权限系统，才是最好的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

「网易蜗牛阅读」和「微信读书」的写书评功能分析

人人都是产品经理 2018-08-19 16:05:00

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、目的

三、用户 – 场景 – 需求分析

小结（这个模块是做什么的？为什么？）：

从写书评方说：

1. 为领读人/书评家/作家提供了一个新的发布自身书评/作品的平台，且通过签约等合作形式为他们提高了收入，同时为他们开拓了新的增加粉丝，扩大影响力，强化IP的新方式；
2. 为作家/书本运营方/媒体机构提供了相对于其他电子书app来说更为专业的推广渠道；
3. 为阅读者（尤其是有写观后感习惯的）提供了更专业、完整、体系化的内容记录与发布方式，以及获取认同，寻求社交，与书友互动交流的新机会。

从看书评方来说：

• 阅读者可以在阅读前去通过书评快速全面了解一本书（零碎时间的泛读），为要不要深入精读提供参考；可以在阅读前通过观察别人对此书的解读，带着自己的问题与思考再去有目的性阅读；可以在阅读时，体系化的记录自己的想法；可以在阅读后寻找他人解读中的不同点或共同点，加深自身思考，以及完善自身的想法。
• 找书者可以通过次主打的导读特色功能，通过专业人士分享的书单或由读过的人分享的想法，找到更值得信赖的内容向导。

从运营方来说：

1. 以书评特色作为产品特色推广，吸引有写观后感习惯的电子书阅读群体，为对写书评有爱好或者以写书评为业的群体提供新的平台，满足拉新需求。
2. 通过书评领读，为用户挑选书籍提供大量专业参考满足留存需求。
3. 以领读人带起书评风潮，以PGC促进UGC，以及通过普通用户对领读人的申请，满足激活需求。
4. 在书评中插入书籍入口，方便用户阅读购买，满足转化需求。

四、业务流程、业务逻辑梳理

功能流程：

1. 入口一：领读 -> 右上角写书评按钮 -> 写书评；
2. 入口二：我的 -> 我的书评 -> 右上角写书评按钮 -> 写书评；
3. 入口三：选择书籍 -> 阅读书籍 -> 右上角写书评按钮 -> 写书评；
4. 入口四：选择书籍 -> 书评栏 -> “写书评，获时长奖励‘输入框 -> 写书评。

四个入口分别代表四种场景：

• 入口一为领读人直接发表文章提供便利；
• 入口二是方便内容发布者对于自己的书评进行编辑管理；
• 入口三提供阅读中随时记录想法，书评素材的方式；
• 入口四的奖励文案鼓励大家加入写书评，加入阅读，且为阅读者提供参考。

业务逻辑：

小结：

通过业务逻辑的分析可以看到，「网易蜗牛平台」，“书评功能”，书评发布方以及书评阅读方四方形成一个完整的循环，首先平台通过优秀领读人的引进，为阅读方提供内容，并与之互动；再通过激励引导，由PGC带动UGC，让阅读方成为发布方，让用户生产内容，并提供申请领读人的渠道；然后发布的内容再次与其他阅读方互动，形成一个完整的循环生态系统。

五、功能点对比

小结：

相同点：通过阅读中，书本详情页进入；输入文字，输入标题，添加笔记/标注，插入书籍；字体，副标题，符号，私密发布，分享功能。（基本功能）

不同点：

• 「网易蜗牛读书」：标题的必要性、添加图片、多本书籍插入；多样化的字体排版选项、PC编辑、保存到草稿箱、奖励、撤销功能。（专业化需求较强）
• 「微信读书」：添加表情；引用、星级评分。（较为注重简单，直接，有趣）

六．总结

抄不抄？

不抄，如果发现UGC内容越来越多，以及专业化需求提高，可以考虑借鉴「网易蜗牛读书」中写书评的多样化编辑功能去完善写想法功能。

原因：

（1）产品定位

主打特色可以看出产品定位，以及发展方向的不同。两者同时对于领读这一模块下了很大的功夫，但玩法不同，「网易蜗牛读书」通过专业领读人（内容分享 & 引流导购）发布的专业书评，去引导用户阅读，降低用户的防备心，所以写作门槛较高。

而「微信读书」则无此需求，以好友作为切入点，通过好友在看的书，进行熟人引读，把用户防备心降到，能让用户无成本接受，但同样容易导致内容参差不齐。

（2）社交属性

「网易蜗牛读书」以PGC为主，专业领读带动社群发展，看书评人与书法发布方本身可能是粉丝关系，也可能无任何关系。而「微信读书」以UGC位置，好友之间的想法碰撞占到大多数。

（3）用户驱动方式

「网易蜗牛读书」以其特色时长阅读，以及兴趣导向，领读人粉丝引进为主。而「微信读书」则有很大部分基于好友之间的竞争关系，通过虚荣心驱动。

所以对于「微信读书」来说，暂时不需要花较大成本引入专业的PGC内容，性价比不高，与产品定位契合度不高。

本文由 @大明 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

我有一个朋友，名字叫做 Jimmy，这的确是一个很普遍的名字。当我认识他的时候，他正供职于一家名为 Shmuckle 的公司，而他正是这家公司的设计师。和所有的设计师一样，他日思夜想梦寐以求的，是成为一名著名的设计师，而乔布斯的经历对他有着不可磨灭的影响。Jimmy 和很多设计师一样，着迷乔教主。好在 Jimmy 的崇拜并不是停留在嘴上，而是身体力行，力图在公司里面推行好的设计。在 Jimmy 的眼中，好的设计应该是直观的、创新且令人愉悦的。

当然，故事的发展如果总是一帆风顺就没有意思了。Jimmy 果然一如正常的剧情推进……他碰到障碍了。

这一次，Jimmy 正在执行一个重要的项目，这个项目的成败将会直接影响到他的职业生涯。这次的任务，他需要为他们公司的一款产品，重新设计整个控制面板。而就在这次的项目当中，Jimmy 发现他没有办法拿出一套足够优秀的解决方案。好在他还有 Plan B，那就是重新找灵感。Jimmy 开始重新播放他最喜欢的设计类的视频，阅读曾经给他启发的文章，收听其他同行所开设的播客，以期在其中找到感觉或者灵感。

可惜，灵感并没有如期而至。局面尴尬了。

就在此刻，援手到了。Sarah 是公司的资深设计师，正巧这个时候路过 Jimmy 的工位，看到了 Jimmy 纠结挣扎的样子。这是多么熟悉的场景啊，她早年入行的时候，同样经历过这样的状态，为求一好设计而痛苦不已。如今，她已经能够轻松驾驭不同的需求，足以应对复杂多变的设计项目。

「Hey Jimmy，老远就看到你正在揪头发，看样子正在构思新设计吧，瞧你这个状态，应该不太顺利吧？」

「诶，客户说让我给他们重新设计整个控制面板。他们觉得不够好使，希望新的控制面板能够更好展示信息，提升效率，最好再把几个比较明显的可访问性问题给解决一下。但是我怎么设计……都觉得不对。客户那边有不少人参与了测试，有人觉得挺棒的，有人又非常讨厌，还有一部分直接说还得接着改。现在，我觉得无能为力，不知道要怎么弄了。」Jimmy 保持着挠头的姿势，盯着屏幕说道。

「别纠结，」Sarah 微笑道：「如果一直盯着问题解决问题是常常会陷入这样的困境的，解决方案其实并不复杂，你需要从根子上来想办法。只要让整个设计方案贴合规则基础稳固了，问题就会迎刃而解了。其实，关键也就是几个基本的设计原则。」

「虽然这话经常听到，但是真的能行？」Jimmy 狐疑地盯着 Sarah，思忖两秒感觉到大姐头这是要传授秘籍，便摸过小本子，端正坐姿，准备做笔记：「那么，都有哪些原则呢？」

Sarah 拍了拍 Jimmy 的肩膀，端了杯咖啡，说道：「下楼散步吧，咱们边走边聊。」

「其实，在产品完成之后，是需要基于几个基本的原则来重新审视和调整设计的。」Sarah 喝了一口咖啡，慢慢地开始说。

保持清晰

Jimmy，如果脑子里面的思路没有梳理清晰，很难做出条理清晰的产品的。因此，在设计产品之前，先应当消除思维中的混乱，有几个事情，在设计的过程中要始终保持关注：

• 业务目标，客户的问题和需要的功能则会催生设计，而这几个因素之间是存在关系的。
• 永远不要为了好看而牺牲功能。
• 下一步要做的事情始终要是不言自明的。
• 对于最重要的内容，要借助负空间、色彩、字体、图形和其他的 UI 元素来进行突出展示的。
• 各种尺寸的文本都应该清晰可见。
• 图标应该而锐利。
• 除此之外，要让设计保持微妙而恰到好处。
• 通过设计，你的用户应该本能的知道他在哪里，以及该做什么。

产品的外观最终都是在清晰的设计（或者不够清晰的设计）之下的副产物。清晰的设计意图，最终会转化为清晰的产品设计。——Massimo Vignelli

「我记得 Massimo Vignelli 在他的《The Vignelli Canon》中写道，一个混乱而复杂的产品始终是源自于制造者本身的混乱，说明这个人本身内心深处心态复杂而想法混乱。」Sarah 说道。Jimmy 此刻若有所思。

可操作的界面

「接下来的这一点也同样很重要。我们设计的数字产品必须清晰，也要专注于当前的任务，一个交互性强、可操作性优秀的 APP 才是用户所需要的，而要做到这一点，屏幕上的内容应当始终是的，并且始终保持较高的相关性。与此同时，APP  也应当作为用户意图的延伸。如果用户打开了你的 APP，想要解决某个问题，执行某个任务，而你的 APP 做不到这一点，那么情况就很糟糕了。」Sarah 说道。

她停了几秒钟，梳理了一下思路，继续说道：「你看，我们所做的一切都是为了确保我们的方案，能够在正确的环境中，面对着对的用户，解决亟需解决的问题。当然，我们要经历很多次的迭代，才能靠近这一目标。」

主观的愿景

「许多设计师和开发者都在说，APP 应该灵活，应该满足所有客户的需求。好吧，Jimmy，这些说法都是胡说八道的。但是有一个说法很真实，也需要你时刻谨记：试图取悦每个人只会带来无尽的压力和痛苦，让你沮丧，失去资源。所以，不要害怕失去一部分用户，真正需要担心的是失去愿景和远见。」

「一个伟大的而足够优秀的数字产品，必须始终清楚它到底是服务于谁的。只有牢记真正的用户，明白他们的需求，才能开发出真正有效的解决方案。最好的数字产品当中，都是藏着愿景的。」Sarah 和 Jimmy 走到了大楼的窗户附近，看着外面来往的人流，Jimmy 忍不住问到：「那其他的用户呢？」Sarah 笑着回答：「当我们满足目前的目标之后，才能顾的上其他的人。我们的目标用户才是核心，其他的人不喜欢，和我们的愿景不匹配，也不用操心。市场上会有其他的应用或者服务能够满足他们，让他们高兴，而我们总是只能身处一个阵营，你不可能什么都拥有。」Sarah 笑着回答 Jimmy 的疑问。

当人们寻找软件和服务的时候，他们要的并不是功能，他们要的是解决问题的方法，一个和自己相匹配的愿景。——37Signals《Getting Real》

反馈系统

下一个原则，也是一个很重要的注意事项，那就是反馈。反馈能够帮用户确定操作是否执行了，明白结果是否发生，让用户明白当前的情况：

• 交互发生时，相应的交互元素应该被凸显出来
• 进度指示控件应该持续地显示当前状态
• 动画和声音的加入有助于用户理解交互的状态和结果

「我想你应该知道，即使技术如此的进步，人类本身的生物性决定了我们依然是依靠反馈来确知互动的结果和状态的。我们的身体（视觉或者触感）需要感受到反馈，再像大脑发出信号，而虚拟的界面背后到底在发生什么，需要全面的交互设计传递出来，只有这样用户才不会费劲巴拉地去思考之前的点击或者滑动交互是否操作成功了。反馈给用户的信息也应该是能够被轻松理解的，用户不应该在这个事情上再费劲去思考了。因此，你手边应该有关于心理学、行为学这类能够揭示人类思考的图书，因为它们能够帮你提升技能。」Sarah 喝了一口咖啡，润了润嗓子，带着 Jimmy 又溜达上楼，回到了办公室。

善用隐喻

「隐喻——我这里说的并不是文学中的隐喻，」Sarah 又提到了一个看似无用但是经常被说起的概念：「你看，UI界面中的设计元素和交互方式和我们的现实生活中的元素和交互方式是如此的相似，这就是借用隐喻将我们的熟悉的元素和交互都投射到虚拟的数字产品当中。这样一来，用户会更快地学会和理解。」

「正是因为隐喻的存在，现实的经验和虚拟的交互产生了关联，用户交互因此而更加自然地发生。视线随着被精心设计的布局而游移到重点上，用户会下意识地点击被高亮显示的、和现实按钮差不多的交互控件，他们还会下意识地在虚拟的屏幕上滑动，在界面之前自然游走。因此，你有必要了解你的核心用户每天都在使用哪些 APP，他们都是如何交互的。这有助于你吸收经验，消除不良的体验，创造舒适的交互，降低学习的压力，更好地转化。」Sarah 一边说着，一边下意识地模拟着交互并解释道。

内容的一致性

「接下来我们还是用案例来说明一下，会更容易理解。」说着 Sarah 坐到椅子上，并且打开电脑屏幕，说道：「比如我们要做一个日历，你认为它应该是网格，还是做成列表？」Jimmy 挠头想了一下，迟疑道：「恩……我们应该坚持使用网格的样式。它更加紧凑也更加有条理，我说的对吗？」

「其实这取决于用户的主要目标是什么。如果这个日历元素是出现在报告文档当中，应该是用网格的样式还是列表的样式呢？一样的，这要看情况。我们是否要在每个应用中都使用全局导航？同样是需要基于上下文情况来决定的。一致的设计不止是表面样式上的一致，还需要从需求、内容、用户使用场景和体验上来保持一致性。如果在特定的情况下，独特的设计能够带来更大的价值，那么这是有意义的，这种特殊情况下不同是有必要的。」Sarah 细心地为 Jimmy 解释道。

良好的设计，应该是特定语境经过评估后定制的副产物，而不是脱离使用场景而凭空创造出来的，否则，无论多么炫酷都是不合时宜的。——Massimo Vignelli

防御性设计

「最后要说的，是防御性设计。」Sarah 转身对着 Jimmy，然后说道最后一个规则。

「防御性设计？什么东西？」Jimmy 感觉今天学到了不少，最后这个原则也被他写到小本子上了。「这个啊，也就是大家常说的直觉性设计。」Sarah 微微一笑。

「我知道！乔布斯以前就经常说这个概念！」Jimmy 终于找到一个他足够熟悉的概念，兴奋不已。

「可是，你真的知道什么是直觉性的设计么？」Sarah 看着兴奋的 Jimmy 卖了个关子。

「预测用户行为？然后在用户要执行下一个操作之前帮他解决需求？」Jimmy 狐疑地问道。

「是也不是。它并不是让你去预测用户的行为，防御性设计是为了避免出错。无论你如何谨慎地去做设计，总会有错误发生，无论你做过多少调研，你计划有多么妥帖，你的产品总会需要一个备用方案来规避问题。」Sarah 说道：「防御性设计，是让你找到可能会出现的问题。」

相信我，你的产品如果给了用户负面的体验，他们绝对不会忘记。

「我还是没明白你的意思……」Jimmy 习惯性地挠头。Sarah 耐心地开始解释：「以开车为例来说明这个事儿吧。当你开车的时候，总会尽量避免道路上各种可能出现的危险情况，比如鲁莽驾驶的大货车，三心二意横穿马路的行人，懵懂无知在路边打闹的儿童，甚至野外窜上马路的野鹿，等等。同样的，作为设计师，我们需要预料到可能会出现的问题，以及始终保持专注来修复这些问题。这样我们就不会破坏整个用户体验。我们要有良好的防御性的设计意识，维持住体验，改善体验。」Sarah 说到这个地方的时候，Jimmy 感觉她身上散发着某种光芒。

然后 Sarah 起身，带着 Jimmy 回到他的工位。「怎么样，这些东西你都记下来了吗？」Sarah 打趣地歪着头看着低着头还在琢磨的 Jimmy，如同大男孩一样的 Jimmy 惊讶地抬头问道：「什么意思？这就是全部嘛？难道只有这些？」

Sarah 呼出一口气，微笑着对 Jimmy 说道：「好了好了，设计原则、规则、规范、技巧有太多，可是对于每个人，每个公司而言，都有属于自己的一套方法和策略。你可以尽兴地去探索，但是即使你不知道全部，也可以借助你所熟知的几个原则和策略，拿出足够优秀的设计。我把我最熟悉的、掌握地最娴熟、体会最深刻的几个原则分享给你，它们足以帮你开启一条走向好设计的道路，我觉得你要是真的体会到了，就已经能够拿出比别人更好的东西了。其他的设计原则，只要你有耐心和时间，还可以继续探索。该工作啦。」

尾声

就像 Sarah 说的，设计原则太多了，谁又规定死了具体有几条呢？每个人心中的哈姆雷特都不一样，每个人眼里的哈利波特又何尝是一样的呢？

最重要的问题在于，许多人知道原则，却并不会在设计项目当中运用它们。洞悉每个设计项目当中的重点，了解客户的需求，明白首要的设计目标，在产品和用户之间，找到平衡点，用心地思考，利用好设计原则这一利器。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

实例分析拆解：如何设计登录注册？

人人都是产品经理 2018-08-09 18:42:15

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

最近对我们的APP的账户体系进行了改版，研究了各类产品的设计。账户体系虽然几乎是通用标配功能，但是各APP的都有差别，都是针对当前的产品形态、发展阶段和用户量级做出了符合自己的设计。账户体系的关键点在登录注册流程上。登录注册流程看似简单，实际考量设计功力。网上关于登录注册的综述有很多了，但是从零到一整合分析的很少，以下，将以实际的产品为例，精细分析如何设计账户体系。

一、立项背景

我们的产品第一版账户体系由于历史原因，做的比较生硬。

初期主攻社交，希望可以沉淀用户信息，手机账号会是第一优先选择，当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。

如你日常体验那样，第三方登录+立刻绑定手机的方式，直接抵消了第三方登录的便利，比直接手机号注册更麻烦。而且，设计上，手机号注册需要设置两次密码，密码需要一致；设置之后，还得进入登录界面，再次填写账号密码，正确匹配才可以进入APP。

总的来说，用户进入APP的路径相当长，步骤多，用户体验低分。

近况是，产品方向探索，将重点落在商城上。完成交易的流程本身就多步骤，再叠加原来的登录注册，路径过深，对拉新损耗大，急需改进。

二、需求分析

从业务发展趋势来看，微信会是重要的用户来源，后续会布局更多的微信运营活动，和商城小程序，设计引流到APP，需重点突出微信登录。

而商城交易需要保证安全性，同时兼容老用户，手机注册密码登录必不可少。考虑到用户文化水平，和互联网产品使用习惯，需要在常规的基础上做简化。

第三方登录需要在关键点绑定，商城推广员提现时变更银行卡，需加以验证身份。

新用户刚进来，可以先浏览熟悉产品内容，在需要身份信息时，再进行引导登录。

三、功能点梳理

登录注册流程：微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。

账户体系配套：关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。

细节功能点见下方的账户体系功能点梳理图。

四、流程图（登录注册）

未登录用户，到达需要获取用户身份信息的界面（为了平衡效率和体验，一般是除一级界面以外的），则触发注册登录流程。用户完成注册登录之后，才可使用和操作绝大部分的功能。

本流程图需要配合页面交互原型理解。

五、关键页面交互设计

登录注册体系将包含五个部分，主界面、验证码登录/注册、密码登录、忘记密码和新用户注册，在实际流程操作中会根据用户的选择，和系统的判断进行切换。账户体系的配套将会略过，以下是登录注册的页面交互设计、设计考量和功能点介绍。

1.主界面

• 布局：主界面集合三种登录方式，将微信登录作为主方式。
• 前提：成功登录的前提条件是必须先勾选同意用户协议，否则报错。
• 授权：第三方的登录，点击微信orQQ，授权成功后，即可登录进入APP，自动获取用户的昵称性别头像信息填充社交页。

2.验证码登录/注册

（1）设计解析

• 手机账号登录，考虑简单又快速进行，突出验证码快速登录/注册，辅以密码注册。
• 密码注册的弊端是很容易忘记密码，忘记之后，找回密码流程也繁琐。
• 验证码登录，虽然对频繁换手机的用户是个噩耗，短信也有达到率的问题，但考虑到效率跟成本，特别在拉新环节，还是作为主方式。

其实基于验证码到达率和安全性，我考虑过换移动认证，就是手机号码一键登录，无需密码跟验证码。可惜实际接洽的时候行不通，而放弃了，文本会介绍下这个事情。

（2）设计点

• 验证码登录：登录注册界面为验证码登录，附以密码登录。
• 按钮：登录注册的按钮合二为一。也就是说，用户不需要选择是登录还是注册，将判断交给了后台。只要用户的手机号码还在，直接凭验证码进入即可。比起选择密码登录之后忘记密码，或者是干脆就不记得自己是否注册过，在错误的界面输入信息之后来回切换，二合一的方式更加友好，也是本次设计的一个亮点。
• 手机号码：采用更加清晰的的3-3-4数值格式，输入框末尾配清除按钮，错误输入后可一键清除。手机号码输入框也有记忆功能，可获取前一次登录的手机账号，可以获取同一次登录注册已填过的账号信息。
• 验证码：手机号码位数输入正确类型和位数之后，才激活验证码功能。否则点击会报错。之后，验证码的激活以变色表现，这是个视觉指示。输入完成第一行，人眼会自然而言的落在第二行的开头，如无例外，用户需要寻找一番，才会觉知过来，去点击获取验证码。
• 加载指示：数据传输到服务端，判断对错，再返回结果。这个流程费些时间，用加载小菊花，表示后台正在处理，舒缓下等待的焦急。

3.密码登录

（1）设计解析

密码登录考虑到向后兼容，老用户的账号以密码登录；也是适应本期的新用户注册。

同时标配忘记密码，也可切换新用户注册，或验证码登录，这些元素的布置考虑，是基于流程的。

密码的输入，其实正如设置密码，应该做格式限制。但是因为第一版没限制，不清楚用户设置了什么，所以此处不能轻易填坑。

数据输入都该考虑下限制的，为什么？在给产品经理讲技术这书里，要是你看到黑科技SQL注入攻击也会很印象深刻的……

（2）流程

跟验证码的简单路径不一样，密码登录因重在流程上逻辑自洽，更需配流程图查看才好理解。

正常流程是：输入手机号->输入密码->点击登录->登录成功。

异常流程是：

• 输入手机号->输入密码->点击登录->提醒“未注册”->点击新用户注册or返回上一级验证码登录/注册。
• 输入手机号->输入密码->点击登录->提醒“未注册”->账号或密码不对->重新输入or忘记密码or验证码登录。

4.忘记密码

（1）设计解析

步骤：忘记密码此处分两步，一步验证，一步设置。设置完之后，直接登录进入APP，无需再重复密码登录的步骤。（记不住密码更痛苦的事情是，忘记密码刚找回来，在下一步重新登录的时候又忘记了）。

异常流程：忘记密码此处还有个异常流程，是该账号不存在。有童鞋会说，正是密码输错才会到来这界面，这么还会有账号不存在的情况？对，情理上其实不大可能发生，但是程序逻辑上有这个可能，但是又无法通过前面的步骤过滤掉，是要补充下的。

此处判断账号不存在的提醒，是点击获取验证码之后，亮点之一。这里是考虑辛辛苦苦获取验证码，填写完毕之后才来告诉用户账号不存在，有些不厚道的……

（2）设计点：

验证账号：常规的做法，先验证码验证手机号，再下一步设置密码。

有些APP会将验证账号跟设置密码放在同一个页面，其实拆开会更清晰。而且，验证手机号码步骤复用率是很高的，比如，可以复用到推广员更改绑定银行卡时，作为账号验证。

设置密码：密码设置要限定格式，之后仅需输入一次就可以直接登录进入了。

重复两次数据，再次校验肯定更稳妥，但是登录成本提高了，以我们用户的耐心，我们的产品就没必要承担这个教育成本了。如果说担心手误输错了的，可以用验证码登录的，再不济可以用找回密码的。但是大多数用户其实只考虑本次能快点进入就好。

5.新用户注册

（1）设计解析

新用户注册界面近乎跟忘记密码是一样的流程，区别在点击获取验证码，此处的异常流程是该账号已存在。此处设置优化的流程，判断是已有账号之后，会直接跳转到验证码登录/注册界面处，直接获取已填写的手机号码，验证就行，对新用户尽量友好。

经过前面的界面筛选，此处的账号不存在的发生概率很少，但是作为关键流程而言，完整性是必要的。

（2）移动认证

文内留个悬念要谈谈移动认证，移动认证是什么？最直接的体验是，无需输入任何数据，直接点击授权就登录。是不是很黑科技？！ 但是为什么最终放弃了呢，请听细讲。

理想情况：

移动认证是运营商移动提供的，基于手机sim卡和移动网络直接认证登录的技术，米家、爱回收跟同花顺应用在了自家APP里。当时上手体验，惊艳，简直零感登录；况且移动官网也有免费的sdk，更是窃喜。以移动认证为主登录的原型设计完毕，就立刻接洽移动认证sdk的接入。

现实情况：

但是呢，很快就被开发文档打脸了，简言之，就是层层筛选之下，能一键登录的用户远没有想象的多。

移动认证的原理是基于移动网络通信的。首先基于sim卡识别本机号码，在移动网络开启的前提下传输信息以授权通过，此时可顺利登陆；但是如果没开移动网络，就没辙了；如果WiFi跟移动网络同开，以WiFi为主，那将强制占道先验证再释放WiFi。如果移动网络通信不成，那就通过短信收发来完成数据传输。

所以，这么流氓的做法苹果肯定是不乐意的；电信不参与；oppo的ROM不支持此流程……层层筛选下来，加上关闭移动网络的，能顺利使用的其实不多；而且，除非付费，否则移动认证的logo说明只能用官方的，简直是给移动打广告….这些阻力远高于收益，所以，果断放弃了，采取了本文讲述的方案。

果然，合适的才是最好的。

本文由 @阅天 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Pexels ，基于 CC0 协议

社交电商只有拼团和砍价？口袋咖啡给你答案

人人都是产品经理 2018-08-10 17:41:58

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这两年来，咖啡业不甘寂寞，和互联网碰撞出的火花越来越多。瑞幸咖啡异军突起，连咖啡微信关系链玩得风生水起，星巴克也牵手阿里巴巴准备收复失地。今天我们就来关注一下连咖啡最近做的一波营销活动“口袋咖啡馆”。

“口袋咖啡馆”是连咖啡小程序内新上线的一个功能，据公开报道的数据：

上线首日PV超过420万，累计开出咖啡馆超过52万个，相当于一天有52万人开了线上咖啡馆。

体验“口袋咖啡馆”之后，我总结成功之处有以下几点：

1. 情怀切入和个性化展示，实现破冰

相信很多爱喝咖啡的人都曾经有个不成熟的梦想叫做“我要开一个咖啡店”，文艺的音乐，明媚的阳光，飘香的咖啡，过此余生。但是因为资金压力，生存压力，咖啡店对大部分人只能说这是一个梦想，或是情怀。

而在线上开一个咖啡店，不用店租，不用进货囤货，甚至不会做咖啡业不要紧，把开店的行为压缩为装饰店铺和朋友圈卖咖啡，实现情怀是不是变得毫无压力和简单了？

先不管“口袋咖啡”背后利用社交渠道卖咖啡，让店主成为分销商的本质，首先“口袋咖啡”抓住了大部分用户的情感需求，简化用户行为，获得了第一波流量。

“口袋咖啡”可以让用户自主地去装修自己的线上店铺，让用户尽可能地发挥自己的想象，各种奇思妙想发酵，用户装修好了，很可能迫不及待地先分享店面给好友。好友一看，有意思，我也玩，这样就把第一波流量给动起来了，带入新的流量。

这两个设计是抓住了用户的情怀圆梦需要和展示个性化自我的需要，从而获得最初的流量并开始传播。

2. 低价单品，获取流量

光靠情怀和个性化展示，应该是无法保证更大的流量获取。

口袋咖啡店铺里的咖啡都是有折扣的，与官方价格相差10多元，甚至还做了一款9元的美式咖啡。分享的文案上也突出了下单9元起的字样，通过价格对比，突出低价来吸引更多的流量，而且新用户购买，首单立减9元。

这就将“低价爆款”+“新用户下单减”结合起来，对于大部分用户来说，工作日时候不会对咖啡太过挑剔，价格有优惠，我买谁的不是买呢？

而且还是微信好友“开的”咖啡馆，情感+好奇心的加持，吸引了又一波流量。

3. 游戏化的任务激励，环环相扣

“口袋咖啡”设计了一套游戏任务进阶提现，通过这样的模式保持用户的粘性，让用户投入更多的时间和社交关系。这套体系由成长咖啡和网红指数为目标，设计了一系列的任务让用户完成以提高这两个目标。

成长咖啡相当于货币，可以积攒兑换咖啡，获得的方法是每卖出一杯咖啡获得0.1杯，攒满1整备成长咖啡就可去免费兑换。这里对于用户来说，目标是获得免费兑换咖啡，而规则就是卖咖啡，为了达到目标，用户就会去分享，去安利，可能带来更多的流量；

而网红指数相当于积分，积分的价值在于解锁特权，包括更多的商品、装饰等。以及获得更高的排名。而这些特权则是可间接有助于提高用户销量的，有助于用户完成“免费兑换咖啡”，获得网红指数的方法则是一系列的任务。

目前的任务较少，不知道后续是否会放出更多玩法。

回过头来，你会发现“口袋咖啡”这一系列打法都是相关联的，都指向了同一个目标获得免费咖啡（背后其实是卖出更多咖啡），彼此是有承接关系，形成了有效的循环。

4. 社交互动带动裂变和变现

连咖啡一直都在尝试做“基于人际关系链”的产品，他们认为这是获取流量最的工具。在“口袋咖啡”里则明显地提现这一点。

4.1 土豪榜和点赞榜，记录好友和你的互动

口袋咖啡有两个榜单，分别是土豪榜和点赞榜，前者记录谁买过了你的咖啡，点赞榜则记录了谁给你点过赞。交易和点赞，一个是实际的消费，一个是情感的激励，会给用户产生更大的正向刺激。

4.2 让用户产生更多的互动行为

如果用户在一个产品之上产生的互动行为越多，则用户和产品的粘性越紧密，用户主动推荐这个产品的可能性也越大。

如何让用户产生更多的互动行为？如何撬动更多的社交链条呢？

口袋咖啡准备了3个手段，分别是明星馆、附近的馆、我去过的馆。

明星馆，邀请了一些流量明星入驻，有佘诗曼、秦岚、李诞等，而且佘诗曼、秦岚还是目前热播的《延禧攻略》的主演，抓住眼下的新闻热点，结合明星自带粉丝的流量，粉丝通过点赞和购买咖啡行为的与明星发生互动。

开一下脑洞，这是不是可以成为另一种形式的明星榜单，各家粉丝通过点赞，买咖啡为自己的爱豆打榜，互相攀比，搞不好可能会成为一个固定的大流量入口。

粉丝组织+明星效应+群体攀比效应=大流量？

这个需要拭目以待。

附近的咖啡馆，和微信本身附近的人异曲同工。利用用户的好奇心驱动，看看附近都有谁在开咖啡馆，会不会又好玩的小哥哥小姐姐，点个赞，买个咖啡，也是不错的。

店主一看有人给我光顾我了，看一眼就在附近，来而不往非礼也，也过去点个赞。一来一往，用户就在线上咖啡馆之间互相流动起来。如果后面官方围绕这一块继续做网站，比如：解锁特权可以给附近的人推送自己的咖啡，完成某个任务看店主的微信等等，有可能会产生新的兴奋点。

当然社交电商里，电商还是初心和本质，社交到底要到什么样的程度，才能有利于电商而不是起副作用，这个度需要团队把控。

我去过的，则是将我访问过的咖啡馆沉淀下来，便于后续的访问，也可以看成团队为后续的社交互动埋下的伏笔。

连咖啡的一系列动作，个人觉得最终目的是希望把咖啡变成货币，不再是人来买咖啡，而是咖啡主动触达到人。不仅仅依靠传统的商品-货币的交易模式，而是希望代入更多的情感因素、社交元素，通过人与人的关系链去获得更多的流量，并且带动更大的交易额。

而近期包括送礼，运动步数换购小程序的崛起，越来越的商家开始关注用社交关系来获客，此前对社交电商的关注更多局限于微商这样的朋友圈叫卖、拼团、砍价、求复活满天飞，容易让用户产生反感和厌倦。

那么如何让用户不反感甚至是主动地贡献自己的社交关系，则是下一步互联网公司们重要的课题。

#专栏作家#

肥寒，微信公众号：chanpingdog，人人都是产品经理专栏作家。九年产品经理。做过数字阅读，电商，社区，目前致力于在线教育。

本文由 @肥寒 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 unsplash，基于 CC0 协议

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

您对用户的了解程度如何？怎么能真正受到人们的启发呢？我怎么能进入他们的想法，我怎么能感受到他们的感受？在这里，你不仅需要了解是什么触发了它们，而且还需要找到如何设计说服的方法。

作为一个直接响应式的功能平台，第一个手机网站只是一个“试验品”，而不是“成品”。在今天，如此多的智能设备的确给了我们机会去做更多的视觉设计，但这不仅能激发和吸引用户，而且增加了用户体验。当然伴随着机会就以为着更多的挑战。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

网页设计是什么？
 网页设计也被称为Web Design、网站设计、Website design、WUI等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的APP来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。我是在小学开始去网吧“上网冲浪”的，那时的电脑屏幕非常小，分辨率只有800x600像素（对比一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机APP差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

工作流程

首先让我们来看一下网站设计的工作流程吧：除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外，与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解，千万不要只在意视觉稿这个阶段，有很多前期与后期工作同样需要得到我们的重视。好，让我们一个一个来了解它们吧。

原型图阶段

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

构建网站原型图（工具：Axure RP ）

视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个“情绪板”（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

视觉稿设计阶段（工具：Photoshop）

设计规范

当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

视觉规范（工具：Photoshop）

切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握PS软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如Cutterman、Zeplin等切图插件中的Web选项为前端切出网站所使用的图片。

从PSD中提取出来的切图（插件：cutterman）

前端代码

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等，这里省略。

 前端工程师代码编译（工具：Notepad +）

项目走查

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

将实现后的截图和设计稿进行比对（工具：Photoshop）

网站种类

网站的分类按对象来划分可以分为To C端和To B端两种。To C端就是面向用户和消费者，例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5等，均是面向用户和消费者的产品。由于是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。而To B端作为一个需求量很大的类别，其实往往被设计师所忽视。什么是To B端项目呢？比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是To B类网站项目了。这些项目的要求和To C端网站的要求大相径庭：To B类项目最重要的是效率而不是体验，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要保证操作者可以地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如Naver、Llinternaute等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

韩国门户网站Naver

企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓“高端”、“大气”、“上档次”的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

美国通用公司官网

产品网站

从苹果公司的iPhone介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。

苹果公司产品介绍页

电商网站

电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

淘宝网首页

游戏网站

游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（https://www.blizzard.com）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。

暴雪公司星际争霸2游戏官网

专题页面

当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。

极有家淘宝专题页面

视频网站

视频网站的访问量惊人，并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多UGC内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前web1.0时代用户主要是单向浏览网站，web2.0提出的UGC概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢？首先要感谢带宽的发展。在今年我们国内点击视频就立马可以播放了，而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景：视频是用户主要观看的区域，所以视频区域首先要足够大，另外颜色应该以暗色为主，因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸，方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

腾讯视频播放页面

移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等H5刷过屏吧？平时我们经常被这种好玩儿的H5刷屏。其实H5全称是HTML5，并不是仅仅指移动端，而是网页前端的开发语言，由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式成为H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展，H5显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的H5的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。

使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端H5项目的时候，我们一般以用户量较高的iPhone6/7/8的尺寸：750x1334px 为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用SF-UI代替。当然H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的H5，就是通过H5工具生成。目前比较火的H5生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将PSD上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。

H5项目的尺寸

后台网站

后台网站又叫Dashborad，中文翻译为仪表盘。其含义就是有一大堆数据与统计信息。后台网站是To B类型，那么首先的需求就是能快速地显示给操作者他需要掌握的数据。可是数据非常枯燥，我们可以使用诸如“折线图”、“饼状图”、“曲线图”、“表格”等不同方式来展现这些繁琐的数据，这种图形表达数据的方式也叫做数据可视化。后台网站不需要特别可爱的插图以及卡通形象，最重要的是效率。所以如果您经常处理To C类的需求，接到了To B类的产品需求时一定要注意这一点。后台网站因为需要更大的画面，通常会使用全屏式排版，也就是撑满整个画布。那如果小屏怎么办呢？前端会使用相对布局缩小各个元素，排版的位置也会用百分比来确定。

微信公众号后台

CRM系统

CRM即Customer relationship management，翻译过来是客户管理管理系统。CRM是企业对客户进行信息化管理的一种形式，用互联网技术实现对客户信息进行收集、管理、分析，对企业的销售、服务、售后进行监控。常见的功能有员工日程管理、订单管理、发票管理等。我们在设计这种项目时一定要将信息按所属的逻辑关系分类，加强对比、对齐、重复、亲密性的原则，使操作者在使用的时候感觉到便利。

Admin CRM dashboard by Divan Raj

SaaS

如果我们服务于为企业搭建CRM、ERP或者OA等系统的第三方公司，那么我们可能会老听到SaaS这个词。SaaS是(Software-as-a-Service)，即软件就是服务。其他公司会来提供SaaS服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。

企业OA

企业OA，即(Office Automation)，也就是办公自动化系统。在六七十年代就兴起了一场使用电脑来改变传统办公方式的革命。在大型企业时常会面临人员众多、地域广袤、办理公司事宜手续冗长等问题，那么企业OA可以很好地解决这方面的问题。通过企业OA可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。互联网公司更是提供给员工除了企业OA之外的交流功能，比如建立员工BBS和留言板等，在上面大家可以对公司提出建议和意见。企业OA一般出于安全和保密性的原因，很多公司都更加愿意自己开发。设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者轻易可以找到在当前页面中最重要的功能。

Robo Advisor - Projection, List and Questionnaire by Michal Parulski

网站组成部分

了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。

首页

访问一个网站时第一个我们触及的就是网站首页。首页别名叫作Index或者Default，是索引和目录的意思。在网站发展的前期阶段，网站并不是富媒体，而是类似于一本书一样：首页类似书籍的目录，需要查看哪个子网页就点击链接即可进入。到了现在，网站首页仍然是引导用户进入不同区域的一个“目录”，这个目录除了导航功能外也要露出一部分内容给用户来吸引点击，露出的部分一定要有一个“更多”按钮来指引用户找到二级页面。

首页原型图

二级页面

在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来说，自然是越靠前访问量越高，页面层级越深越不容易被用户找到。一般网站有三级页面，就是为了避免用户迷失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面第一屏出现的诸如 首页 > 体育 > NBA频道 这样的超链接结构，方便用户理解自己在那里，并且点击可以回到其他页面。

二级页面原型图

底层页

在网站结构中最后提供用户实质资讯的页面就是底层页。比如，在门户网站首页或二级页面中我们点击感兴趣的标题后，在底层页中才会看到全部的资讯。待用户阅读完底层页的信息后可以顺势在左侧或右侧的侧栏寻找用户可能感兴趣的相关内容；在底侧可以看到网友的评论；底侧也会有分享按钮、赞功能等；如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。

底层页原型图

广告

门户类网站如何盈利？广告是变现方法之一。网站的广告一般由负责运营需求的设计师负责，但是也可能由频道设计师、产品侧设计师来完成。在网站中常见到的广告图形式就是banner。banner一般尺寸巨大，在网站之中非常显眼。因此也不一定是外部广告，也有内部活动、推荐资讯等。那么banner图的尺寸有固定吗？答案是没有。Banner的宽度有两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以banner不可以做得很高，否则第一屏信息会显示得不够。你可能会说，那就让用户往下拉啊。但是在网站的访问用户之中，第二屏触及到的用户比第一屏会少很多。也就是很多用户可能点击网站后就会跳走或者关闭，那么第一屏的信息真的非常重要了，可谓是寸土寸金。所以我们的banner不应该占据过大的区域。比如站酷网的Banner区域为1380x350px。那么除了首页巨大的banner广告位，网站还有哪些广告形式呢？

对联广告。在门户网站中我们经常会看到网站左右安全区域之外会有连个随屏幕滚动的像“对联”一样的广告，通常banner也会是一个广告内容，并且居中会弹出由HTML5技术或Flash技术制作出来的弹窗广告。这种广告一般组合售卖，也就是说一进网站你就会被全面轰炸，无法不注意到这个广告的存在。这种广告点击进入还有配合的专题页等，可见需要设计师配合的地方非常多。

对联广告形式

信息流广告。信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。

知乎APP中信息流中的广告

以上从广告的形式上简单介绍了三种常见的网站广告形式，如果我们在阅读需求时看到了cpm、pv等单词是什么意思呢？他们是广告的收费模式。cpm是指按照广告pv来收费，cps是指按照用户消费收费，cpa是指按照用户注册数收费，cpc是指按照用户点击付费。针对不同的收费模式，在设计时也会采取不同策略来增强广告需要达到的目的。

Footer

在网站具体的页面设计中，底部会有一个区域我们称之为footer。一般footer的颜色都会比上边内容区域要暗，因为footer的信息在逻辑的级别上是次要的。footer区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让footer变得特别明显。

技术原理

网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑C盘保存一个叫logo.jpg的图片，然后在浏览器打开这个网址：C:\logo.jpg你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个IP地址，这个IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登陆成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次“握手”。当然老“握手”会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是“cookies”：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。

基于鼠标的手势操作

基于鼠标的交互

在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目前网站设计最主流的交互方式还是鼠标和键盘。来让我们看看鼠标有什么结构吧！我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操作都是通过鼠标左键点击完成的，所以网页也是点击的艺术。右键一般会唤起右键菜单，但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互。与鼠标发生交互的主要是超链接与按钮。那么让我们来了解一下超链接的四个状态吧（前端术语是：超链接标签的CSS四个伪类）。

按钮与文字的不同状态

Link是指超链接正常的时候的状态。一般超链接需要与普通文字区别开来，比如换一种颜色或者加下划线。当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字。Link默认都是蓝色的（色值：#72ACE3），但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。总之一定要在形式上与普通文字产生差别才可以。

Visited是超链接被点击以后的状态。比如新浪网新闻非常多，所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了。所以新浪网使用了Visited属性，点击后的新闻颜色就不一样了，方便用户区别自己哪些新闻还没有浏览。

Hover：是超链接鼠标经过状态。这个状态是连接中最为重要的状态。其实不只超链接，按钮和图片以及视频等一切可交互的元素都应该设置Hover属性，也就是鼠标悬停时的状态。一般来说变换颜色和放大是Hover状态的基本方式。

Active：是指超链接的激活状态。点击后超链接可以通过CSS加载一个状态。

同样的链接样式也可以应用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设计成不同的样式，方便用户通过鼠标感知这个物体是被我按下去的，这种给用户的暗示我们也叫做“点击感”。当然按钮会和链接稍有不同，按钮除了具备正常和鼠标悬停等状态，还有一种状态叫不可点击。这种状态将按钮置灰，提示用户这个功能因为条件不满足不可以点击。好了，您可以举出几个点击感Web设计的例子吗？

静态网页

了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由HTML编译的，我们在服务器上存储的网页代码基本都是HTML格式。HTML全称是HyperText Markup Language，即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用HTML语言写一段文字会是什么样呢？

模拟代码编译过程

没错，代码就是这么一点一点编起来的。在任何网站空白处右键点击查看网页源代码你就可以看到网页的HTML代码啦。HTML这种代码是由一个国际组织 - W3C发布和维护的。W3C创建于1994年，是网站国际中立性技术标准机构。W3C已经发布了HTML的诸多版本，其中影响最深远的是HTML4版本。而HTML5简称H5则可以说是划时代的版本了。H5的标签更加接近现代，并且本身可以播放视频，这就可以淘汰掉Flash插件了。（Flash插件带来了比如系统漏洞、加载速度过慢等问题）同时H5对多平台支持很好，所以适应移动端为王的当今时代。H5甚至还可以变成游戏、Webapp（在网页上如本地程序一样工作的网站，比如蓝湖等）、多媒体等多种形式。可是由于IE浏览器这类不支持HTML5效果的浏览器在用户中占比还很高，所以造成了HTML5发展的制约。浏览器可以理解为一个代码阅读器，由于它对HTML5代码的翻译工作不好就会造成所谓“兼容性”的问题。比如HTML5中可以通过代码给一个DIV添加投影，那么在某些浏览器中就显示不了这个效果。不难理解为什么有程序员会穿着 i hate IE字样的T恤了吧。在每次做完一个网站项目时，测试工程师都会用Chrome、Safari、Firefox、Opera、IE、Edge等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如减少对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高一尺魔高一丈呀。

其他前端语言

有了HTML这个骨架，加上图片和多媒体后，网站的发展速度就更快了。但是服务器的损耗很大：所有用户都需要重复地来服务器下载代码和图片等资源进行“握手”，而且很多HTML代码都是重复的，造成了资源的浪费。比如，如果我网站的头部都是黄色的、链接都是蓝色的，那么每个页面都会啰嗦这几句代码。这个问题没多久就被一种崭新的代码解决了：CSS技术。CSS是层叠样式表的意思：我们可以理解为现在把网站的样式（颜色、大小、位置等样式信息）也就是CSS和网站的内容（文字、图片、链接等内容信息）也就是HTML完全分开，并且一个网站可以下载一份CSS然后不同页面都调取这份CSS的缓存，那么就节省了服务器资源。另外，由于网站需要一些交互效果，比如点击和菜单等，那么需要前端工程师使用Javas cript代码来配合。Javas cript是一种比较短小精悍的语言，构建一些基于浏览器的非常顺手。所以目前主流的网站配置是HTML5+CSS3+JS代码的组合，当然为了兼容那些低端浏览器也可能使用HTML4+CSS+JS的套餐。这取决于我们的主要目标用户群在使用什么样的浏览器。当然，我讲这些并不是要求您去学习HTML、CSS、JS代码然后进行前端开发，因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作以便更好地配合他们。

主流形式：HTML + CSS + JS

动态网页

了解完静态网页还不够，现在让我们谈谈网站如何动起来。动态网页不是说它有狂拽酷炫的动画，而是动态网页会随着时间、内容和数据库的调用而产生动态的网页。比如今天看到的新闻网站和昨天的新闻肯定不一样了，可是网站首页的HTML代码并不需要人去手工修改，而是让小编通过后台录入新闻、上传图片就好了。小编上传后台的过程就会输入数据库，而动态网页又是调取数据库内容显示给用户的一种形式。动态网页会随时调取数据库中的信息给用户，而对用户来说似乎静态网页和动态网页长得都是一样的。那么最傻瓜的判断方式是看网址结尾，静态网页结尾是html或htm，而动态网页由于使用了高级网页编程技术，结尾则是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是动态网页的语言，当然有的时候为了让网站效率提升也会使用伪静态结构，结尾和静态网页就一致了，但是实际上是会在用户访问前调取一遍数据库的。同时动态网页的网址会有一个特点，含有？符号。动态语言目前最火的是Php，较早而现在比较少见的是Asp、Cgi，最安全的是Jsp，所以很多银行采用JSP编译。了解完这些，我们基本就弄清楚网站的运行原理了。

主流后台编译语言：PHP ASP JSP CGI

雪碧图

我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，HTML5视频播放；这种方式缺点就是不兼容低端浏览器。第二，Flash Player播放器播放；这种方式的缺点是Flash安全性很低而且效率慢。第三，动画使用Gif格式；这种方式的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那么像Google首页Doodle的动画是怎么实现的呢？这种技术叫做：雪碧图。CSS雪碧 即CSS Sprite，也有人叫CSS精灵，它是一种CSS图像合并技术。它本身调用的图片是支持多级透明的PNG格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的PNG图片里。然后代码在一个100px的宽度框子内背景图调用这张png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。雪碧图也有自身的缺点：如果帧数太多，会消耗很大的内存。所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2,4,6,8,10删除，保留一半的动作。

雪碧图

视差滚动

视差滚动是一种运动速率不一样的设计效果，用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态PSD文件。

运用了视差滚动效果的密尔沃基警察局官网（milwaukeepolicenews.com）

网页设计规范

终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。

画板尺寸

因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在版Photoshop网站Web预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。

网站的尺寸规范

文字规范

我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和Windows系统电脑上看到的文字效果就有所不同：苹果会对文字进行渲染，而windows的文字几乎充满了像素颗粒。按照用户占比来说无疑Windows的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和Windows显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择Windows Lcd或锐利。另外，英文和数字需使用Arial字体，渲染方式选择无。

网站字体规范

图片规范

网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？

第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如Photoshop中存储为web所用格式就会比快速存储文件更小。

第二种方法，可以尝试使用例如Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。

第三种方法，Google研发了一种Webp格式，它的图片压缩体积大约只有JPEG的2/3，能节省大量的服务器宽带资源。比如Facebook、Ebay还有我们设计师常用的站酷图片存储都是使用了Webp图片格式。

第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。

在线压缩工具Tinypng网站

按钮

按钮的风格在过去的十几年发生了很大的变化，由一开始的“斜面与浮雕”风格过渡到后面的“拟物风格”，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。

不同时代下不同的按钮风格

表单

在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件，一般是直接调用系统设计的。但是系统设计有时不能满足我们的要求：系统内置的表单高度不够，点击起来不舒服；不符合网站整体设计的品牌感等。那么我们可以通过CSS给这些表单增加样式，包括颜色、大小、内外边距等。所以我们遇到涉及到表单的需求时也可以进行自定义设计。

表单不同风格的设计 UIDE Kit  by Mateusz Dembek

栅格

我们把整体宽度定义为W。然后整个宽度分成多个等分单元A。每个单元A中有元素a和间距i。所以他们之间的关系就是 (A×n)-i=W。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。 比如

如果网页宽度是1000px，我们可以使用：

20列每列40px和10像素间隔

20列每列30px和20像素间隔

25列每列30px和10像素间隔

25列每列20px和20像素间隔

如果网页宽度是990px，我们可以使用：

11列每列80px和10像素间隔

18列每列35px和20像素间隔

25列每列45px和10像素间隔

33列每列20px和10像素间隔

如果网页宽度是980px，我们可以使用：

14列每列60px和10像素间隔

14列每列50px和20像素间隔

28列每列25px和10像素间隔

栅格系统具体有以下优势：能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

网站的栅格化会使网站看起来更有秩序感

适配Retina屏幕

2012年苹果发布了Retina Macbook Pro，Retina屏幕的电脑占有量越来越高了。Retina屏幕简单地说就是屏幕密度是传统屏幕的两倍，拥有更大地清晰度。甚至可以满足我们视网膜最高的识别度，所以也叫视网膜屏幕。这种屏幕下我们设计的安全距离大约为1000像素的网站就显得非常粗糙了。所以如果我们现在Retina屏幕下显示一个400X300PX的区域，实际上我们需要提供给前端一张800X600PX的切图才行，因为Retina屏幕一个点顶过去两个像素。那么我们的用户是视网膜屏占比更多的用户，比如设计师群体，那怎么兼顾高清屏幕和普通屏幕呢？

首先我们需要以视网膜屏幕大小完成设计稿，建议是传统设计稿的两倍。之后切出两套切图（非Retina屏幕用户如果也加载双倍大小的资源会很慢），普通的切图命名为如logo.jpg，Retina切图命名为logo@2x.jpg。前端用代码来识别，如果屏幕是Retina就加载双倍尺寸，不是则加载普通尺寸。前端可以使用Retina.js（https://retinajs.com/）提供的技术进行识别。

自适应与响应式网站

我们看到有些网站使用电脑端或者手机端甚至iPad去浏览时体验都非常好。这就需要我们为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的css。

自适应网站

自适应网站的设计稿是一致的，但是设计稿需要考虑屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局。比如站酷网、Dribbble等网站都采用了自适应布局。

响应式网站

响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的CSS样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的CSS样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。

适配的规范

手机方面：适配手机页面时，我们一般以iPhone为画布标准。原因是iPhone相对显示比较清晰，并且要求较高。而且用户占有量也很高。在适配时我们一般以750x1334px尺寸为主，然后将网站导航改变为手机APP常常使用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机APP中我们看到的左右几乎满屏的按钮，并且每个按钮要大于88PX，方便手指的点击。字体方面，我们要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用SF-UI代替。也就是将网站改变成一个类APP的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

iPad：iPad的尺寸为1024x768、2048x1536px等，无论怎么变基本与电脑屏幕尺寸类似。所以在iPad上浏览网页是基本舒适的。因此，很多网站并没有专门为iPad做适配，如果我们希望iPad用户用的更爽，可以从文字大小（24PX以上）、按钮大小（88PX左右以及以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方式入手。

不同设备的注意事项

总结

无论您面对的项目是To C的还是To B的网站产品，我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。

如果设计一般网站的页面，可以按照1920 X 1080px尺寸设计。每屏高度900px，字体使用宋体 12px 无 和微软雅黑 14-20 Windows LCD。Banner尽量满屏，但是图片需要按照4:3或16:9等比例来设计。做网站时可以建立栅格以更好地进行自适应和响应式布局，我们也要为超链接和按钮设计不同的相应鼠标的状态；另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互。

如果设计手机端的页面，可以按照750X1334PX尺寸设计。字体使用苹方 24PX以上 锐利。英文字体使用SF UI。按钮和点击区域需要大于88PX方便手指点击。并且头部需要预留出微信或浏览器的导航区域。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。