帐号作为用户身份在互联网产品中的投射，是用户在产品中重要的身份信息。突出用户个性风格的头像信息可以促进用户之间互动社交行为，提高用户对产品的粘性。
帐号作为用户身份在互联网产品中的投射，是用户在产品中重要的身份信息。我们可以通过用户的头像、用户名、挂件等快速辨识用户性格兴趣喜好等特征。在用户进行社交时，帐号头像是最直观、最快速的了解用户的方式之一。识别性强的头像信息可以促进用户之间互动社交行为，提升评论区活跃度与氛围感，从而提高用户对产品的粘性。在百度APP中真实头像占比较低，让用户上传/拍摄图片作为头像，对用户而言成本较高，并且存在图片质量和内容监管等问题。因此产品内部的推荐头像就显得尤为关键。
当前百度APP中默认推荐头像设计过时，不能满足当下用户群体对专属个人身份标识的诉求。本次目标就是提升用户真实头像占比、同时提升百度APP社区氛围体验，强化用户个人属性身份认知，由此来塑造帐号的真实感。
对默认推荐头像进行重新设计，如何满足百度APP庞大的用户群体是设计中的重点难点。第一是需要满足用户不同的身份特征个性诉求，第二是设计需要满足整体产品设计定位。
在上述前提下我们启动了百度APP帐号人格化创新设计，进一步满足了用户对个性化的诉求，并提高用户粘性。
一、需求洞察
首先是问题定位，目前仅有30%的用户自定义真实头像，相较于竞品处于较低的状态。并且默认头像设计过时，氛围感不⾜，体验较差。本次目标就是提升用户真实头像占比、同时提升百度APP社区氛围体验，强化用户个人属性认知，由此来塑造帐号的真实感。
二、设计打法
确定目标后，围绕真实感氛围营造展开了一系列的发散。以业务、人群、人格三个维度进行切入；分析和探索后发现单纯的业务和人群划分较为局限。为满足百度APP用户群体各年龄层、多种性格等的诉求，最终确定为心理学人格方向，以心理学“荣格人格”为理论基础进行展开。
心理学家荣格定义了人类基础人格的12个主要类型。每种类型都有自己的价值观、意义和性格特点，从性格中提取关键词，分别筛选出有共性的、大众熟知度高的动物形象来匹配12种人格。
三、形象设计
基于人格理论依据开始将动物具像化，经过大量的讨论、草图绘制、筛选和优化。
草图绘制确定动物形象基础造型与特征。以天真者为例，为了表现形象俏皮、可爱的特性，兔子一边耳朵折叠，并且选用圆润的外观，搭配脸上的腮红。通过表情大眼睛，张嘴微笑来表达心理人格。
在绘制的草图中选取最符合人物性格，并且用户可以接受的可爱的没有对抗性的设计。
将选定的草图在三维软件中进行模型制作。优化模型布线并制作模型贴图、灯光、材质，完成三维化制作。通过以上的设计流程完成12种人格的动物形象制作。
为了进一步提高IP形象的影响力，推动更多业务场景的应用。对IP头像进行身体延展，打造专属IP团体，进一步符合人格化定位，提升形象辨识度。
四、应用&收益
为了保证用户选择多样性和不同的圈层喜好，除了12个动物形象，还提供了一系列实景拍摄照片，包括风景、艺术、生活、中国风等主题等来满足用户需求。
头像设置页面优化升级，提升页面容器屏效。将之前头像尺寸减小并缩小间距，保证有限屏幕内用户可以看到更多的头像。并将头像以分类形式显现，方便用户挑选符合自己喜好的头像样式。下方“拍照”和“从相册选择”入口样式更新，突出拍照入口。
42个新增头像已经在PASS源头进行铺设使用，在百度APP产品内、以及PC端PASS注册环节做了相关的使用引导，保证用户可触达新版的头像。
整套帐号人格化头像设计完成百度系产品落地应用，助力全系产品提升用户粘性。
除了百度APP端内场景运用外，还在端外场景提升IP形象影响力。2021年牛年春节推出牛年专享新春红包。为金牛形象设计专属新春服饰&场景，打造财神牛形象，以搭配农历春节时间段，金牛、元宝、祥云相结合突出节日喜庆的气氛。
帐号人格化头像上线后得到了良好的反馈，用户满意度及推荐度远超预期，得到了近90%的用户反馈。同时通过相关的场景推荐综合提升了百度APP用户真实头像占比，并且数据还在持续提升中。
一、提高用户粘性
帐号头像是真实用户在产品中的身份标识，可以展示用户的个人性格特点、兴趣爱好。提升用户在产品中的辨识度，同时提升用户互动氛围，提高用户粘性。后期还可通过运营和推广手段，形成具体用户画像，达成精准的内容推送。
二、持续供给装扮资产
帐号人格化形象设计上线后得到了良好的用户反馈及数据收益。我们会继续思考IP形象的拓展以及产品中的深度应用。之后IP形象不止单单出现在用户头像设置上，会继续精细化设计完成场景、装扮等精细化设计。并应用于百度APP首页皮肤、号主页背景装扮、头像挂件等场景。持续供给百度APP装扮资产，综合
提升用户吸引力&用户粘性。
文章来源：UI中国 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.为什么这个配色会怪？
我们在画线性图标的时候，有时候会用深浅色配合，比如描边用亮蓝色和深蓝色，像这种：
我们会觉得很和谐，为什么？虽然他们饱和度、明度不同，但他们有相同的色相，有一定的关联性。
还有一种情况就是相同明度、饱和度，但是有两种色相，比如蓝绿，蓝黄：
我们也都觉得很和谐，为什么？因为有相同的明度、饱和度，他们也有一定的关联性！
但是如果是这样两个描边配色在一起：
就感觉有些不和谐，就是因为色相、饱和度、明度没有一项是有关联的，所以就感觉不太搭。
像下面这位星友做的练习，也是一样的道理：
这个配色多少有点不太和谐，我们放大一个图标来展示下，比如这个：
这两个配色，不论是在明度、饱和度、色相上都没有关联，所以看起来有点违和。
我们只要让它稍微有点相同属性，就会好很多，比如我们让两个颜色的色相有点关联，都用蓝色色相：
再比如让两个颜色饱和度有点关联，都用比较灰的颜色，哪怕色相完全不同，都会比较和谐：
我们在做这种图标描边配色时候时候，一定要注意这个内在关联性的逻辑。
当然，这里说的只是做图标描边时候的配色，视觉画面配色，不在讨论范围。
2.为什么你的图标看不清？
这个点之前其实有强调过，很多同学在做图标的时候很糊，像下面这组练习：
其中一个很重要的因素就是投影问题，投影千万不要加的太重，要和你主体物的颜色区分开，比如我的主体物是蓝色：
然后投影也用这个蓝色：
那肯定很糊呀，所以我们必须要用一个淡蓝色：
直接降低透明度也行，没有什么操作成本，所以投影千万别再和主体物黏在一起了。
3.对比就能出来基础的设计感
很多时候，我们的设计感其实只要做好对比就能出来，比如下面这组信息：
我们做一个大小对比：
再做一个粗细对比：
再做一个深浅对比：
然后再来一个景上添花的样式对比，就是数字来一个特殊数字：
这其实就算是比较稳的一个效果了。
我们可以看一些界面：
他们里面也是用了这样的对比，比如大小对比、样式对比、深浅对比，再来点小图形等等。
所以，一定要善用这些对比，让你的设计更有层次，更有冲击力。
4.平时多积累图形的布尔运算
平时在练习图标的时候，大家一定要多积累图形的布尔运算，以备不时之需。
比如火箭的外轮廓，当头部比较圆润的时候，我们可以直接用椭圆来做：
如果头部比较尖的时候，我们可以用两个椭圆相交切，然后再切：
像这样的形状，我们不仅可以做火箭头，还可以做鱼的外轮廓等等:
还可以做眼睛的外轮廓：
多去联想，多去实践，当脑库存达到一定量，我们就可以得心应手了！
文章来源：UI中国 作者：菜心设计铺
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
什么是瓷片区
由运营板块拼接而成，视觉上像一块块瓷片，灵活性高。适用于各种运营模式，具有较高的转化率
卡片布局
瓷片的外容器排版
单行
优点：节省屏效，日常营销为重点业务留白
缺点：坑位有限，三个以上时营销氛围设计受限
左右排列
优点：主次层级清晰，适合作为功能入口
缺点：坑位越多，越影响营销氛围；推行者需具备与各业务沟通的能力，协调入口之间的平衡
上下排列
优点：个数不受限，易塑造氛围感
缺点：高信噪比
图文排版
瓷片区的常见排版通常用：满版型、上下分割型、左右分割型、中轴型、倾斜型
满版型
以图片为吸引点，充斥整个瓷片区，文本内容居左排版为主，常见旅游、电竞、资讯类
上下分割型
版面分为上下两部分，分别配置文字或图片，常见上文下多图的形式，符合常规的阅读顺序，该场景下图片更易引起用户兴趣，常见电商类
左右分割型
版面分割成左右两部分，分别配置文字或图片，常见左文右图的形式，该场景下，文本偏理性，具有直观的表述能力；图片偏感性，辅助文本信息点缀模块。常见资讯类、产品入口等
中轴型
常见垂直排列，信息更集中有活力
倾斜型
版面主体倾斜排列，常见对角线式形式。能承载更多的信息内容，页面层级也更活跃
配图风格
常见类型有两种：实物与插画
实物类
优点：识别性高、更直观、可复用、设计效率高，个性化推荐更精准
缺点：对图片素材要求较高，个性化服务需要开发资源
插画类
优点：创意性强、可塑性强、具有趣味性、易形成品牌调性
缺点：抽象图形不直观，复用性低，绘制耗时，不易做个性化
Tips：设计师要牢记，设计时思考延展性和平台风格如何为业务（运营、产品、技术）赋能，但长期影响CTR（点击率）一定是由业务内容决定，避免背锅。
文章来源：UI中国 作者：七月七咸
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前段时间在年终总结会上，产品经理向设计团队提出了一个问题：怎么证明你的设计是有价值的？如何衡量验证Ui、UX的设计效果？
很多人都认为，公司的业绩取决于产品和运营，和设计师关系不大，甚至有些公司想取消年终绩效。那么，改如何判断设计结果是否好坏，设计产生的影响又该怎样被量化？
我相信回复肯定是：可以通过数据来找到答案。
但又会有新的问题出现：需要哪些数据可以验证设计效果？又该怎样通过数据来判断设计的效果究竟是好是坏？
满意度
简单来说是用来衡量用户对产品服务和体验的整体满意程度。我们都知道，要提高满意度，要满足很多个条件，比如产品功能、运行速度等。这里我们分两个维度，用户体验质量和产品目标。
1）用户体验质量
用户体验指标可以从净推荐值（NPS）来衡量，净推荐值意为用户是否愿意将产品推荐给身边人的指标。净推荐值是有一个公式：NPS值=推荐者所占比例-批评者比例。
9-10分（推荐者）：活跃度很高的用户
7-8分（被动者）：对产品满意但忠诚度不高的用户
0-6分（批评者）：对产品不满意的用户
还可以通过反馈，来收集功能或界面的问题反馈比例，更直观的评估用户操作过程中的感受反馈，来进一步优化迭代。
降低用户的学习成本也能提高体验质量，通俗的讲，就是用户对产品接受度和使用成本的高低，更偏向于产品和交互层面。
2）产品目标
简单来说，就是希望产品上线以后，会达到什么样的结果。
例如一个列表筛选功能，其核心目标是为了让用户在多维度混合排列里找到自己想要的目标群。
当用户筛选后，找到了想要的信息且进入了目标页面，说明指标已成功；反之没找到想要的结果，中断了操作流程，说明任务失败。以此为依据，通过是否完成的维度来进行衡量，确定筛选按钮到任务界面的UV转化率。
结合上面的用户体验质量，来验证设计需要注意哪些方面，关注哪些数据来达到目的。
活跃用户数
通常观察日活（DAU）和月活（MAU）就可以。活跃用户数用于衡量产品的用户粘性，便于了解产品一段时间的用户情况，了解产品的用户变化趋势。
日活（DAU）：一个用户一天通过相同的渠道多次访问产品，DAU仍只算一个；
月活（MAU）：在一月内多次访问产品，MAU仍只算一个。
日活越高，说明有刚需的忠实用户越多。月活越高，说明新增的用户越多，但未必是忠实用户。当然，活跃度的高低也需要根据用户的停留时长有一定的联系。如果只是打开产品而并没有使用，其实这个数据的意义并不是很大。
用户留存率
一般是衡量产品或功能的新用户增长程度，对产品或功能的新用户占比。这对于新产品或新功能特别有用。
提取数据的一般周期为1日、7日或者30日。日留存率通常用来衡量产品粘性；周留存率通常用于判断产生的忠实用户数；月留存率通常用于衡量版本迭代的效果。
如果产品做了更新迭代，并且提升了月留存率，而其他变量没有变化时，说明此次迭代很成功。所以通过留存率可以很直观的判断产品的用户粘性是上升还是下降。同时老用户的留存率也需要关注，好的更新迭代不仅可以留住新用户，还可以唤醒“沉睡用户”。
完成率
衡量流程设计的合理性，通常用于产品中主要任务流程的内容，这里单指设计中操作流程的顺畅度。
完成率是产品设计中重要的指标之一，完成率越高，产品的操作体验就越好。
最后
数据只是有效验证的方法之一，并不是万能的。就如调查问卷一样，都会有一定的局限性和不确定性，数据能明确看到结果，但不能说明具体原因，只能作为支撑来验证设计师的想法或决定，但无法代替设计直觉、用户研究和设计可用性。
文章来源：站酷 作者：UX设计帮
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当看到一个产品的视觉效果时，我们通常能很快地判断出它是吸引人的还是哪儿有点不对劲。但是，很少有人能接着说出来为什么这样设计的原因。
本文定义了影响UX的5条实用法则：
1. 比例
2. 视觉层级
3. 平衡
4. 对比
5.格式塔原则
遵循以下5条设计法则可以创造出全面周到的视觉效果，推动用户的参与度并提高可用性。
01 比例
定义：比例原则是指在布局中使用相对大小来展示设计元素的重要性和层级的优先关系。
正确使用此原理最简单的方式是，最重要的设计元素的尺寸要比不重要的元素大。原因很简单，大的事物更能引起用户的注意。在停车场中，当前所在停车区域往往会突出显示，这样做的目的是加深用户的记忆，方便回来取车。
良好的视觉设计通常使用不超过三种不同的尺寸。拥有一系列大小不同的设计元素，不仅能在排版上创造出多样性，而且还能在页面上建立视觉层级结构。
确保最大程度地强调设计中最重要的部分，帮助用户理解如何使用它。例如在Medium中，热门文章在视觉上比其他文章更大。
02 视觉层级
定义：视觉层级的原理是指在布局中，按照元素的重要性排序来引导用户的注意力。
视觉层级可以通过比例，颜色，间距，位置和其他各种信号的变化来实现。同时它也控制用户最终的体验。如果很难确定页面布局的具体位置，则很可能是其布局缺少清晰的视觉层级。
要创建清晰的视觉层级结构，请使用2–3种字体大小来向用户展示页面最重要的信息。或者对重要的内容使用明亮的颜色标注，对次要内容使用柔和的颜色。在Medium中，标题、副标题、正文具有清晰的视觉层级，文章每部分的字体大小都和其重要性相对应。
比例的大小也可以帮助定义视觉层级，因此可以针对不同设计元素进行各种比例的组合，一般的设计经验是包含大、中、小三种设计组件。Uber中的视觉层级结构就很清晰。地图和输入框对半分开，输入框上的灰色的背景引导用户进行下一步操作。
03 平衡
定义：平衡原则是指对设计元素进行满意的排列和比例设置。当屏幕两侧存在分布相同（不一定对称）的视觉元素时，就会达到平衡。在设计时元素所占的面积在创建平衡时也很重要，而不仅仅是元素的数量。
平衡的布局可以是：
对称：元素相对于中心线对称分布
不对称：元素相对于中心线不对称分布
径向：元素从中心的公共点放射分布
在设计中使用什么样的布局取决于想要传达的内容。对称的布局安静而稳定，例如The Hub Style Exploration的界面展现了稳定的对称布局。
不对称的布局是动态的并且引人入胜，创造了一种活力和动感。Nike的设计布局，显示出与品牌相称的具有运动感的不对称的布局。
而径向的布局始终将用户的注意力引向视觉中心，Brathwait手表在径向上保持平衡，所以注意力立即被吸引到表盘的中心。
04 对比
定义：对比原理别。是指将视觉上不同的元素并列排布，以传达这些元素不同的功能类别。换句话说，对比为用户提供了不同对象在大小或颜色上的明显差异。
对比原则通常利用颜色来进行分辨。例如，在UI设计中红色通常代表删除，而绿色代表同意或继续。换句话说，对比为用户提供了不同对象在大小或颜色上的明显差异。
通常在UX中说起对比度，我们会想到文字与其背景之间的对比。有时设计人员会故意降低文字的对比度，用来表示不太重要的内容。
但是在降低文字对比度的同时文字的可读性也会降低，这会导致用户无法看清文字内容。在Greenhouse Juice的包装上，瓶身上文字的可读性取决于果汁的颜色。在深色果汁瓶身上文字对比强，可读性比较好，但是浅色果汁瓶身上的文字几乎无法识别。
05 格式塔原理
定义：格式塔原理解释了人类如何简化和组织由许多元素组成的复杂图像，通过下意识的将各个部分安排到一个有组织的系统中，而不是将它们解释为一系列不同的元素。
格式塔原理指出了我们倾向于感知整体而不是个体元素。在NBC徽标中，中间空白处并没有孔雀，但我们的大脑却能自动填补空缺的部分，感觉到孔雀的存在。
在Uber的注册页面中，字段标签靠近其相应的文本框，这样能轻松理解需要在哪些文本框中输入信息。
总结
除了使某些东西看起来“漂亮”之外，理解和利用这些法则还有助于：
1. 增加可用性。遵循这些视觉设计原则能够设计出易于使用的页面布局。
2. 激发积极情感。美好的事物会引发积极的情绪。美学-可用性效应表明，当人们发现外观上具有吸引力的设计时，可能会对设计的可用性更宽容。
3. 增强品牌认知度。强大的视觉系统可以帮助建立用户对产品的信任和兴趣。
文章来源：站酷 作者：Clippp
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
Duoton icon
渐变色已经流行了段时间,双色渐变设计依然持续是一个大趋势，因为单一的色调无法满足产品所需，双色调图标的特点就是色彩对比鲜明，青春活力，这种相比单色调图标，更适合应用于一些主流偏年轻化产品，因此设计师还可以通过设计色彩打动用户，提升产品竞争力，工具化产品也可以使用这样有层次的图标，不过使用时，需要对色彩进行克制使用。因此，如果您希望自己的设计界面脱颖而出，可以去大胆的使用双色调色彩。
1. 双色调多层质感(弥散渐变，直投影，混合模式)
2. 双色调混合模式叠加
Alpha icon 图标风格最大特点就是单色带透明渐变，通过弱透明度来制造视觉层次，如果是纯白色，就会显得图标平庸了一些，这种图标运用范围可以是界面中空场景或者一些关键模块的主功能图标。
如下图左侧大卡片上面图标应用思路。
层叠式图标，相比于纯白色线条图标，它带来一种更舒适的质感，其设计方法是通过穿插层叠的手法，将日常我们所见到的单一的线条图标，变得更具有视觉层次感，当然这种图标使用场景一般会是在功能说明性页面，功能介绍等。
品牌植入一直是非常大趋势，包括今年我们所看到两大厂的品牌更新IBM和UBER等，都是将品牌核心符号植入设计中，我想这样的思路在2020年将持续会是一个重要表达产品气质和记忆点手法打造思路之一，因为用户已经很熟悉目前图标模式，如何能创新区别其他产品，那么融入品牌将是一个不错的选择~品牌的融入技巧有高低之分，需要设计师去巧妙设计
同样多邻国在前段时间更新品牌，并将其LOGO特征符号植入字体中。
同样多邻国在前段时间更新品牌，并将其特征元素植入字体中
动态图标是一个能提升产品体验的方法之一，也是微交互中的一种，它可以增加产品趣味性，Facebook在评论入口的表情动画就运用了动态图标， 包括苹果Apple Pay支付成功图标动画，Google Assistant智能助手，Messenger中的打招呼动画等等我们可以逐渐发现动态图标比静态图标的表达性更强，更受到青睐，随着硬件升级，这种动态图标运用逐渐在越来越多场景可见到。
备注（因为视频比较麻烦，因此省略了）
文章来源：优波设计 作者：设计TNT
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着体验设计的持续发展，行业内各领域的体验设计质量都有了很大的提升，并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求，也是我们拉开竞品差距的关键一环。我们平时可能阅读了很多理论知识文章，但往往在实际工作中却较少运用。学习掌握理论基础知识固然是很重要的，但在设计执行时掌握设计技巧也更能提升工作的效率和质量。那么在设计执行层遇到问题有没有一些立竿见影的解决方案呢？本篇文章分别从视觉、内容和交互三个角度总结了十个界面细节设计点，希望可以帮助你遇到问题时另辟蹊径，延伸更好的设计思路。
在封面和背景图设计的场景中，我们为了让封面上的信息能够更容易看清，通常会在文字下添加一层黑色半透明或者渐变蒙层，但你有想过这个蒙层可以不止是黑色的吗？
在设计社区话题详情顶部背景图时，我们采用封面图模糊处理后作为背景图的方案，为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。当用纯黑色作为蒙层时浅色背景可能会显得很脏，这时可以改用深灰色让背景看起来不会太脏，加入深灰色可以减弱部分背景的黑色让背景图看起来更加柔和。下图左边是用黑色#000000、30%不透明度，右边是深灰#333333、30%不透明度。可以看出右边方案的效果明显更清爽一些。当然更好的方案是通过客户端拾取背景图颜色后生成对应色相的深色蒙层，但这个方案设计相对比较复杂。需要制定一系列拾色和生成对应色值的规范，并且开发成本偏高。有条件的话也可以考虑应用。
界面中使用圆角设计更能让用户感到亲和力和舒适感，所以运用场景也非常广泛。除了比较常见的封面、卡片、按钮等等圆角的使用场景，在一些细节的处理运用圆角也能提升设计品质。比如下图中头像和背景图的衔接处、按钮和底栏背景的相交缺口处如果运用常规的切割边角就比较尖锐，会略显生硬。
而添加了圆角处理后视觉上会更加柔和更协调，对比一下前后的方案不难发现圆角的效果更胜一筹。不要看只是一点很小的细节，其实也体现了设计师对细节的细心追求，用户看了也会体会到设计师的用心。
另外再介绍一下我个人在sketch中快速绘制这类圆角衔接的方法。以下图为例，首先头像的圆形描边需要单独画一个白色的圆形图层，而不能直接在头像上添加描边。然后把圆形图层和白色矩形图层设为联集，再将图层路径合并。然后在两个衔接处的两边各添加一个锚点，注意两个锚点和衔接点的距离一定要相等，这个距离决定了圆角的大小，可以根据需要来调整。之后把衔接点的锚点类型改为“笔直”，再给这个锚点添加圆角半径。这样衔接点的圆角绘制就完成啦。另外运用布尔运算来画出圆角也是可以的，具体方法可以根据个人习惯来选择。
我们在页面取色时经常会给背景色和阴影等结合场景带有一些颜色倾向，以达到更舒适的视觉效果，其实这个方法也适用于文字。为了提升效率，我们习惯了在选择字色时使用一套设计规范里的颜色，比如#333333、#999999等等。但是个别的特殊模块我们是可以根据实际情况调整以获得更好的视觉效果的。比如下面这个案例是一个热帖榜单的入口模块，为了提高信息层级让页面更有活力，这里选择用浅黄色作为背景。如果使用规范的字色与背景的结合会相对不太协调，这里选择字色时就可以让文字颜色和背景颜色带有相同的色相，选用高饱和度低明度的颜色，并且次级信息同时可以带一点不透明度。让整个模块视觉更统一，信息与背景更融合。
类似这样的场景其实还有很多，有时我们也不必拘泥于设计规范中，适当的根据模块定制化一些细节可以达到更好的视觉效果。
我们经常会遇到一个页面中有多个同级图标排列的情况，不管是用宫格排列或是列表排列都需要每个图标整齐有序、尺寸统一。但实际情况下不可能每个图标尺寸都完全统一。一般这种情况我们可以给每个图标统一添加一个相同尺寸的矩形图层作为背景板，将背景板隐藏后再整体编组，这样一来就能保证每个图标所在的组都是相同的尺寸就能统一对齐了。
然鹅，我们有时会遇到一些不规则形状图标，尺寸是奇数甚至是带小数的。这种情况图标如果要在背景板上完全居中，我们可以打开首选项中的图层项，关闭契合像素功能，然后可以拖动图标或者用对齐功能让图标与背景板对齐。不要忽略这一两个像素的差别，这些微小的细节往往决定了界面设计的严谨和精致程度。
另外，我们可以根据情况灵活调整图标在背景板中的位置，例如左右箭头图标为了与页面其他内容边距对齐，可以将图标贴合背景板左右两边。这样就能减少后期开发还原调整的工作量，提高工作效率。
标题信息在界面设计中使用频率非常高，而在设计过程中我们可能会忽略极限字数的情况，导致开发还原时实际效果不理想。下面以一个案例来分享一下标题极限值的处理方法。
在腾讯动漫社区改版中设计话题详情页的标题时，产品规划标题的字数为12个字符，在右边有看漫画按钮的情况下是显示不完全的。这个情况就要考虑设计极限值的显示方案。常规的方案有：1、显示不完全时后面显示“...”；2、换行显示。考虑到详情页需要将标题完全展示，所以方案一不可行。而方案二在单行和双行两种情况下视觉效果不好统一。最终经过思考决定使用方案三：标题显示不全时左右滚动展示，可以在保证视觉统一同时显示完整的标题。
同样的，在很多情况下我们由于空间受限无法展示完整信息时，这个方案也不失为一个很好的选择。
在页面设计工作中我们有时会遇到信息容器边界固定，而容器内信息可以滑动的情况。例如下图中顶部导航和音乐播放的歌词页面，这种场景下一般容器边界不会做明显的界限，如果内容在边界处是直接被裁切的话体验的感受就会比较割裂。我们可以尝试更好的解决方案，在容器边界增加渐变过渡，这样信息在边缘的过渡就变得柔和，页面整体更协调。
这种渐变的过渡的应用场景还有很多，比如浏览简介或者文章时，需要隐藏部分内容并提供展开阅读全文的操作。利用渐变过渡也能隐喻还有未完全展示的内容，降低用户的理解成本并且也能够让用户有心理预期。
另外在sketch上呈现这种渐变过渡也很方便，如果背景是纯色的话可以在边界处添加一个与背景色相同颜色的色块，然后给色块添加添加不透明度从0～100的渐变，这个方法比较简单。如果遇到背景复杂的情况，也可以绘制一个和容器相同大小的矩形，在矩形边缘添加不透明度从0～100的渐变，然后建立蒙版把信息剪切到矩形中。
至于开发实现的方案还是要和开发哥哥具体沟通，确保用最便捷的方案还原出最好的效果。
动态流是我们非常常见的样式，是分发用户生产内容的主要载体之一。主要包含了用户信息、文字、图片和视频等内容。一般情况支持九张图片或一个视频，在有多张图片时，可以如下图做成宫格的样式适配，每张图片截取中间的正方形部分。
而只有一张图片或者视频时，为了保证图片和视频的预览效果，通常会做大尺寸的预览图，而图片的宽高尺寸并不固定，所以只截取中间方形的方案并不能满足要求，我们要根据这个情况做单独的适配方案。首先我们要设定一个裁切的比例，比如我们取竖图最小裁剪宽高比为2:3，横图最大裁剪宽高比为3:2（这里的宽高比并不是固定的，可以根据实际需要自己定义比例，采用4:3、16:9等比例都是可以的）。这样当图片宽高比小于2:3时，我们可以把图片中间区域按宽高2:3裁剪出来；图片宽高大于2:3并且小于3:2时可以按原图比例预览；而图片宽高大于3:2时，把图片中间区域按宽高3:2裁剪出来。另外要注意要给图片设置最大高度，否则图片高度太高会减少页面信息承载量，降低阅读效率，相应的也要限制最大宽度，否则会使图片规则不统一，从而页面适配效果不协调。
同样的，这个规则也适用于视频，由于全面屏手机占比越来越高，这些手机拍摄的视频大多是19:9、20:9的宽高比例，相比视频常用的16:9的比例更加细长，所以横屏视频可以统一裁剪为16:9比例，而竖屏视频可以裁剪为9:16比例。
动态流图片适配的核心是制定一个适配的规范来保证阅读的舒适度和效率。而这个规范并不是恒定的，可以根据自身平台需要来制定，以上仅作为一个示例供参考哦。
随着沉浸式设计的趋势，很多页面会采用无标题栏的设计。例如下图的个人中心页面，顶部利用背景图来渲染品牌氛围。但是这类无标题栏页面的上滑交互普遍有个缺陷，就是如果未经处理上滑后内容会与顶部电池条者是置顶的按钮位置重叠。这种类似“穿帮”的情况给用户的体验就是设计处理不够严谨。然而这种交互细节也是可以优化改善的。
优化的原理也很简单，就是在上滑过程中添加一个标题栏来分割页面内容，从而让内容和顶部元素不重叠。标题栏可以随上滑高度改变不透明度，以达到柔和的过渡从而实现丝滑的交互体验。
类似的处理方案在各大平台也有较为广泛的应用。
在用户体验发展的趋势中，无论是交互的反馈或者是图片、信息等都趋于由静态向动态发展。常规的静态图片承载的信息相对有限，所以在有限的载体内让内容动起来展示更大的信息量不失为一个很好的选择。
在旧版本的iOS12系统中有一个视图选择的功能，用户在这个页面可以选择标准视图和放大视图，并且有三张图可以滑动展示不同场景下两个选项的差异，但是这个方案需要来回切换标签和滑动图片来对比差异，效率很低。而在之后改版的iOS13系统中，这三张静态图被替换成了两张动图，轮流切换三个场景的页面，用户不需要再滑动图片就能更加直观的对比两个选项的差异。这个小改动不仅可以让图片展示更多的信息，还能减少用户的操作成本提升操作上的体验，让阅读效率更高。
类似的延展应用场景也有很多，例如新功能引导动画、动态banner等等。其实原理都是一样的，在常规静态图的基础上优化为动态图，不仅能增加信息的承载量，提高阅读效率，也能让页面更有活力。
为了满足运营的需要，我们有时会在多同级个图标或者按钮中突出其中的一个。例如下图的分享弹窗，想要在多个分享途径中突出微信的图标，但同时又要保证图标风格的一致性，这时就可以利用微动效来达到强调的效果。
而微动效的落地形势也有很多种，下面抛砖引玉介绍几种简单高效的方案。
可以看到添加了微动效后不仅可以达到强调某一个对象的目的，同时也能保证每个图标风格的统一，微动效也让页面更活泼有灵性，不失为一举多得的方案。
微动效的形势当然不局限于上面几种，大家也可以发散思维，创造更多有创意的方案。
文章来源：站酷 作者：腾讯动漫TCD
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果需要设计一个轮播，我们应该考虑哪些因素？如何让轮播更具有价值？如何让轮播的体验更好？如何避免轮播常见的问题。
提到轮播首先可能想到的是广告，我们经常在移动端首页或网站首页会看到各式各样的轮播banner，不管在移动端还是网页上通常点击数据都是非常差的，本篇文章带你深入了解banner轮播。
如果需要设计一个轮播，我们应该考虑哪些因素？如何让轮播更具有价值？如何让轮播的体验更好？如何避免轮播常见的问题。
本篇文章通过以下几点探索轮播的特性，预计阅读20分钟
目录
1、用户真的使用轮播吗
2、轮播的轮换形式
3、轮播的进度展示
4、轮播定位
5、轮播的切换
6、对轮播进行分类
7、使用缩略图进行预知
8、轮播异形化
9、轮播时间
10、总结
一、用户真的使用轮播吗
用户是否对轮播有感知，这个则需要根据不同的场景进行判断，包括每个产品中的每个轮播对用户用户的定位也不相同，常见的应用场景品牌曝光、活动营销、产品展示，每个场景下相关的数据也不相同。
促销轮播banner
品牌推广轮播banner
产品介绍轮播banner
同时还有个关键因素，轮播的占比，这里以pc端为例若是产品是以品牌效应吸引用户的，大多轮播是以大的屏幕占比为主通常会占首屏的50%，如果是以营销、内容为主的产品，轮播通常以16:9、7:4的常规比例进行展示。
轮播的页数
用户在使用产品时会默认忽略轮播区域，一般轮播都会有自动轮换机制，一定时间后自动轮放下一张banner，那么每当页面上进行轮播时便会吸引用户进行关注，效果上会有一定的提升，所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。
还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。
如果banner是作为内容传播希望用户通过banner了解内容，那么则要避免放在最后一位置，对于用户而言最后一张轮播路径过于长，并且用户很少会手动滑动banner。
国外一家公司在针对轮播中进行了相关的研究测试，随着页数的增加用户的点击逐步下降。
那么如果想让产品中的轮播更具有效果，则需要根据不同的场景设定策略达到目的。
二、轮播的轮换形式
不管在移动端还是手机端，轮播都有各种交互形式和尺寸，以pc为例在交互上会多样化一些，常见的几种则是通过滚轮滑动、通过点击切换两种。
如下图某艺术网站，它则是通过鼠标滚轮进行切换轮播banner，并且banner的占比也是铺满首屏，这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点，同时也符合用户目标。
在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换，并且占比也是铺满首屏，在医美领域用户更关注美感，而轮播形态也是符合用户的心理预期更加沉浸美观。
而在移动端轮播的形式就比较统一，大多都是自动播放+手指滑动进行切换。
三、轮播的进度展示
在网页中轮播都会有当前的定位点，许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标，不用一张一张切换，但是在有些产品中会忽略这一点，设计中会做的非常小导致用户在点击上可用性不太友好，如下图中的banenr进度点设计上过于小导致点击上有些阻碍。
如以下网站去除进度定位的方式，通过缩略图预览来告知用户下一个banner的内容，空白区域也可以添加缩略图引导介绍等关键信息，帮助用户提前预知在体验上相对较好。
以下国外某网站在进度定位的设计上采用了标签文案方式进行设计，能够帮助用户更加全局的了解banner内容
四、轮播的定位
定位主要是用来指示当前轮播的进度，像上图中讲的便于用户更加全局的观看banner的张数和当前进度。
以下网站的设计中则把定位与进度相结合，进度条展示该banner预计多久会切换下一张，对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。
以下是某个国外网站，不管是pc还是移动端都在轮播底部添加了水平条，告知用户当前位置
随着市场上产品同质化严重，产品的竞争力也更依赖体验，在下图中的数据可视化的网站上，在进度条上就利用了产品的特性以饼状图的形式进行展示。
五、轮播的切换
在刚才上面举的例子中很多优秀的网站在设计上都很有创新性，但是需要注意一个点，在轮播中不只有自动播放，还需要考虑用户手动切换，因为在实际用户浏览中可能会对产品的播放时间达不到预期，此时则会使用手动切换，除去可点击的进度点，还需要上一张和下一张的入口切换。
在此基础上需要注意，在处于最后一张banner时，下一张切换还能不能点击，第一张时上一张切换还能不能切换，这个取决于产品特性和轮播张数，如果轮播张数过小的话则需要进行循环播放，如果过多的页数则第一步和最后一步不可点击。
切换的距离和位置
上一张和下一张的距离远近取决于banner的大小，如果轮播banner占比较大时则需要考虑用户的操作时长，距离越短时间越快，为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出，便于用户寻找。
如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大，保持视觉平衡，因为小区域banner用户能够更加全局的观看，在使用上不会犹豫。
反观移动端在轮播中除了展示banner进度外很少展示切换按钮，移动端更加依赖手势交互。
六、对轮播进行分类
当轮播banner过多时利用标签进行分类，用户通过点击标签进行查看相关的轮播组合。
此方式更适合一些电商平台、新闻网站这种内容过多的产品
如下图国外社交媒体网站则使用了标签进行分类，此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。
七、使用缩略图进行预知
在banner首屏中，显示的内容越多，越能激发用户进行点击，像上面讲过的农业产品网站就使用下一张预览图的形式进行展示，当然不仅局限于这种形式，如下图中的餐饮网站把所有的轮播banner展示给用户观看。
相对于缩放图，图标展示效果上也较好，空间占用更少，使用这种方式需要谨慎，对图标的识别性要求较高，我印象中能够使用的这种方法的网站是苹果官网，让产品抽象化展示。
在移动端也存在这种设计手法，但是基于分辨率原因移动端的缩略图展示过少，最常见的如下图中的马蜂窝和企鹅电竞。
八、轮播个性化
轮播最大的缺陷则是像刚开始讲的用户会默认为广告，对此可以使用个性化设计突破用户心理障碍，使轮播banner更具备亲和力。
如下图中的数码科技网站，利用产品与背景的结合营造出一种功能性的展示。
再例如下图中苹果官网入口，结合百度的定制化功能在大搜中进行个性化处理，把常规的banner轮播以功能卡片形式进行展示，同时卡片承载产品动画引导用户进行点击。
苹果官网进入后随意点击产品介绍页后会发现，苹果把轮播结合鼠标滚轮营造沉浸式观看，每个屏效内都展示产品一个功能特点，打破传统banner的展现形式。
九、自动轮播时间
自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级，如我们平常使用产品时会忽略banner广告，我们会更加关注移动中的东西，特别是在移动端上通常是banner进行轮播时才会关注。
谷歌设计团队曾对banner轮播的时间进行测试，测试结果得出5s-7s的轮播时间最佳，在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。
如下图谷歌商店的轮播时间设定在6s。
同时还需要注意，在自动播放的过程中如果用户鼠标hover上去后，则需要判定播放暂定，避免用户错过感兴趣的内容。
十、总结
本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍，在实际产品中轮播有很多可用性上的问题存在，我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。
文章来源：UI中国 作者：爱吃猫的鱼____
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一、什么是交互设计？
先来看一下百度百科的定义
交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。简而言之，交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。
为什么要做交互设计
在使用网站，软件，消费产品或各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。
从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。
通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。
二、交互设计常用原则和定律有哪些？
尼尔森十大可用性原则
1、状态可见原则
系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。
即在用户操作界面功能时给予实时反馈，例如：页面加载状态提示、按钮点击后的状态变化、进度条提示等。
2、环境贴切原则
设计的一切表现和表述，尽可能贴近用户所在的环境，将现实环境的操作功能巧妙的转化为线上功能，使其贴近用户。使用用户能听懂的专业术语，涉及到专业化语言时要转化成用户熟悉的语言。
即模拟真实的事物，使用户更容易理解。例如：天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品，降低理解成本。
3、操作可控原则
对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。
例如：删除联系人二次确认提示、消息可撤回操作。
4、一致性原则
遵循统一的产品设计规范／逻辑。这里的一致性包含产品和跨平台产品之间的一致性。
一致性包含视觉交互、文案描述、组建样式等，例如：微信小程序设计规范。
5、防错原则
设置防错的机制，减少用户犯错。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。
例如：用户名称校验提示、手机号码位数限制等。
6、易取原则
减少用户记忆负荷，在适合的时机给用户需要获取的信息。
例如：验证码读取、找人转账提示等。
7、灵活高效原则
提供灵活的操作和高效的获取信息能力。
例如：手机号码一键登录、消息关键字识别等。
8、优美简约原则
保留产品最主要的信息，如果不是优先级最高，要尽一切可能避免去影响产品的简洁和美观。
9、容错原则
用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。
例如：信息输入提示、搜索无结果等。
10、提供人性化帮助
在用户需要的时候提供必要的帮助说明。
例如：新功能引导、解释说明文案等。
七个交互设计定律
1、菲兹定律
点击一个目标的时间同以下两个因素有关：
（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；
（2）目标的大小（S）。目标越大，所用时间越短。
该定律经常运用于鼠标从点A到点B的运动。
例如常用按钮的尺寸设计等。
2、希克定律
一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。
交互设计中要合理设置选项，以免用户使用中决策时间过长，降低使用效率。
3、米勒7±2定律
乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。
例如：手机号码的分位显示、应用中标签栏数量等
4、邻近性法则
人们通常将距离近的事物划分为一组。
界面设计中可以用对象间的相对距离来区分信息层级。
5、复杂性守恒定律
每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。
例如：在智能手机出现之前，手机上的操作按钮都是实体按钮。在智能手机出现手，手机被整个屏幕占据后，所有的操作都集合在了手机系统之中，等于把物理操作转移到了系统操作中，其本身的功能复杂程度并没有发生改变，只是转移了而已。
6、防错原则
大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。
例如：登录时用户名校验，手机号码位数限制等。
7、奥卡姆剃刀原则
“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。
”这个原理称为“如无必要，勿增实体”，即“简单有效原理”。
在设计中可以使用户关注最主要的信息而非其它无关紧要的事物，从而提升使用效率。
三、交互设计如何开展工作
首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图，而是要先分析需求，了解产品的战略层和范围层的业务目标。把握产品设计大方向，只有方向对了后面的工作才是有价值的。
把握了产品方向，下面就该进行需求的分析，
首先针对需求考虑5个问题：
1、为什么要做这个功能？（业务需求）
2、产品期望得到怎样的成果？（业务目标）
3、谁来使用？（目标用户）
4、他们要怎样使用？（用户需求）
5、如何让他们都来使用？（将业务目标转化为用户行为）
清楚这5个问题后，再根据交互设计流程进行一步一步的进行
这实际上就是对需求的战略层分析。
我们进一步分析业务需求（业务目的、业务目标）和用户需求（目标用户、用户体验目标），把握关键因素（用户的动机、担忧和影响目标达成的障碍）。
归纳这些需求，明确设计策略。
将“业务目标”转化为“用户行为”，通过引导用户的使用来帮助产品实现目标。
从设计“用户行为”到设计“用户界面”，用户行为决定了用户界面，用户界面也导致了用户会出现什么样的行为。
设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。
四、如何进行用户研究，方法有哪些
评估的形式及方法
常见的评估形式分为三类：
1、评估主体：根据评估的主体不同来进行区分，即谁来做评估。
按照评估主体来区分主要有两个主体：用户和专家
用户评估主要靠收集用户使用数据，也就是用户测试，它的数据相对客观，但时间和费用较多，评估范围较窄。
专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观，但费时少、费用少、评估范围窄。
两种评估方法可以相互补充，并结合使用。
2、评估性质：例如定性评估、定量评估或着其它方式。
按照评估的性质来区分可以分为定量评估和定性评估。
定量评估是指对可以计量的部分进行评价，如点击量、使用率等，可以用数据来说明。
定性评估是指对非计量性的部分进行评价，如流畅度、舒适性、创造性等进行评价。它只能表示一个度，无法准确用数据来说明问题。
3、评估过程：按照评估的过程来进行区分。
从评估的过程来区分可以分为理性评估和感性评估。
理性评估相对客观，从客观的角度出发判断客观事物。
感性评估更为主观，评估结果并没有客观规律。
在实际应用中也需要将理性评估和感性评估结合使用，才能完整的完成我们的任务，达到我们的目标。
常见的评估方法有四种：
1、原型评估方法：在产品研发过程中，对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法，原型方法的目的是将界面设计与用户的需求进行匹配。
一般来说原型评估方法分为三大类型：
（1）快速原型：原型迅速成型并分配实施，在原型实验收集的信息基础上，系统从草案中得以完善。
（2）增量原型：应用与大型系统，从系统的基本骨架开始，需要阶段性的安装，及系统的本质特征是在初次安装完成后允许阶段性测试，以减少遗漏的重要特征。
（3）演化原型：对前期的设计原型不断进行补充和优化，直到成为最后的系统。
2、简易测试评估方法
在条件不允许的情况下，可以采取简易的方法来对用户体验进行评价。步骤是：
（1）实验室环境准备：准备好测试用的电脑或其他媒介。两个房间，房间1用来对被测试者进行测试，房间2用于设计师和工程师的观察。
（2）被试选择：分为用户组和专家组。
（3）进行测试：房间1中被试者根据自己的选择进行操作和测试，同时说出自己的内心想法，观察员在调查表上记录被试者的每一次的操作情况，包括出错情况和被试者的口语描述，当被试者在测试过程中遇到困难或操作无法进行时，观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2，设计师和工程师实时观察和记录被试者的情况，以便今后对产品做进一步的修改和完善。
（4）结果分析：通过多次测试后，将测试结果汇总，提取出交互设计中存在的问题，以及对交互设计有益的建议形成测试报告。
3、眼动评估方法
眼动追踪可以用来评价对产品（包括硬件产品和软件产品）设计的感性意象，评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。
4、脑电评估方法
通过对脑电信号的分析，研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛，被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷，例如空间分辨率上的局限性，因而对某些认知过程和脑区的定位并不是很准确。第二，在许多相似的实验研究中，由于研究者采用了不同的实验材料和方法等，实验结果也存在差异性。第三 ，由于采集记录时间的滞后性，脑电所记录的并不一定是当下被试者所想到的内容。
采取哪种方法来开展用户测试和评估，要根据不同的任务结合不同的环境来开展，比如：时间、成本、资源等。
启发式评估法
是专家评估法的一种，也被称为经验性评估，最初由Nielsen博士提出。简单来说，启发式评估是一种简易的可用性评估方法，使用一套相对简单、通用、有启发性的可用性原则，让几个评审根据专业知识和经验来进行评估，发现产品潜在的可用性问题。
启发式评估的两大要素：评估者和评估参照的原则。
对评估者的要求主要有四个方面：
（1）人数：推荐3-5人，有时会更少
（2）知识：最好同时具有可用性知识及设计知识
（3）身份：最好是非设计者本人，否者不具有客观性
（4）岗位：设计师或用户研究员
评估参照的原则有：尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择，常用的是尼尔森十大交互原则。
什么时候适合使用启发式评估法？
交互设计和UI设计阶段、测试优化和产品发布后的阶段。
启发式评估的优缺点有哪些？
优点：成本低、效率高、发现大多数可用性问题，甚至是用户测试时不会出现的问题。
缺点：不能代表真实用户，相对主观、有时候发现问题过多、对评估人员知识背景要求较高。
什么时候适用？
（1）适合时间、资源有限的情况下快速发现可用性问题，降低风险及成本。
（2）版本变动不大的情况下，小成本检验。
（3）作为可用性测试的之前准备。
启发式评估流程是什么？
（1）准备阶段：确定范围、背景调查、参考评估原则、评委邀约、材料准备
（2）执行阶段：任务走查、整体走查、结果记录
（3）分析阶段：汇总讨论、报告总结、优化方案
可用性测试
先来看一下我们在平时工作中常常会听到这样的问题
产品经理：我们的用户觉得产品好不好用？使用过程中会不会遇到问题？他们是否满意？
设计师：设计的过程有一些纠结的地方，不知道实际用户是怎么理解和操作的怎么办？
产品开发后：想在大推前检验一下产品是否靠谱，适不适合大推？
当我们遇到这样的一些问题时，如何找到方法快速得到答案呢？
那就是接下来要介绍的可用性测试方法。
可用性测试是一种常用的、高效的方法。
它的定义是：通过观察具有代表性的用户，完成产品的典型任务，从而找出产品可用性问题并解决，目的是为了改善产品，让产品更容易使用。
什么时候适合做可用性测试呢？
一般是在：交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好，可以尽早发现问题并及时调整。
类型分为两种：形成式和总结式
形成式特点：小样本、发现问题为主、不能做定量对比。
总结式特点：大样本（30人以上）、定量的评估、可以做对比评估
可用性测试可以解决什么样的问题？
1、发现问题，产品在体验上是否存在问题
2、检验实现，期望的设计目的有没有达成，是否满足了用户的期望
3、产品评估，用户是否会满意
4、理解用户，了解用户行为习惯，了解用户认知，找到某些问题的原因
测试流程是什么？
整体上分为4个阶段：1、准备 2、测试 3、分析 4、优化
1、准备阶段要做的有哪些？
确定目标：确定测试目标决定了后面测试过程要怎样去设计
常见的测试目标有：
·对整个产品做可用性评估
·对新增的功能模块进行评估
·提前观察新方案对新老用户有怎样的影响
·提前检测改版是否达到预计目标
·设计时存在争议，如何选择解决方案
·某个环节流失率较高，检测是否为设计原因导致
·需要拓展某一类特殊用户，测试针对这类用户在设计上是否需要作出调整
准备测试方案
方案中应当包含以下内容：
·测试目的：明确测试的目的及范围，测试目的决定了测试方案
·测试关注点：与负责的设计师一起梳理测试中要关注的问题
·用户招募：招募要求，样本配比，招募渠道
·经费预算：奖励的形式和额度
·时间计划：用于把控时间计划
撰写测试脚本：设计测试任务，通过用户行为去观察提问来获得我们想要的内容
基本的流程有：
·暖场：3min，简单聊天，消除用户的紧张情绪
·测试说明：2min，对测试内容规则做说明
·测试前访谈：10min，了解用户基本信息
·简单试用：3min，让用户熟悉产品
·测试执行：30-45min，提示任务并观察
·事后访谈：15min，针对疑点问点追问，填写评价表
·道别：5min，支付礼金，送用户离开
招募用户
招募什么样的用户呢？
·根据测试目的来定，找出与测试目标有关的筛选纬度
·特别考虑用户使用行为相关的特征，例如竞品使用经验，使用产品的目的，用户的活跃度等
·挑选最核心的纬度，转化成用户招募的条件，并尽量客观化，具体化，可衡量
·避免设置交叉条件过多，导致样本代表性降低
·学会辨别真假的用户信息
招募多少用户合适？
·以发现问题为目的快速可用性测试，6-8名即可
·考虑产品的复杂性，覆盖人群差异性，适当做调整，拓展到10-15名
招募渠道有哪些？
·公司内部
·现有产品用户库
·公司其他产品用户库
·熟人，朋友等
·推广渠道：官微、公众号、门户网等
·社区，论坛，qq群等
·第三方调研公司
准备测试素材：低保真或高保真原型，或线上已经可以使用的产品，也可以准备一些量表工具来辅助测试。在测试
过程中需要用到的电脑或手机设备，摄像头，纸，笔，桌椅等。
测试场地选择：
·专业可用性测试实验室：一般对测试质量要求较高，旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间，一个测试间，一个观察间，中间有单向玻璃分隔。测试间中有多角度的摄像头，用来记录测试过程，观察间可以同步看到测试间里的情况，
·普通测试环境：在观察人数较少（小于3人），条件有限时使用。
预测试阶段：正式测试前进行预测试，保证测试流程通畅
·走查：记录可能出现的问题
·预测试：找人先测试一下
·调整：调整测试流程
正式测试阶段
测试参与人员有
·主持人：引导整个测试流程
·记录员：记录操作行为，访谈内容，发现问题等
·产品团队：参与旁听，观察，结束后交流
·用户：完成测试及访谈任务
测试过程中需要观察的要点：
·用户是否独立完成了任务
·是否存在无效操作或不知所措的情况
·用户是否满意
结果分析
边测试边总结，越及时越好
·测试完一个用户，做一次小结
·测试结束当天写小结，与设计师当场讨论
·重要问题反馈后再总结分析报告
·边测边改，边改边测
结果分析4个步骤：1、对发现分类 2、整理不确定项 3、评定优先级 4、结果记录
撰写报告
从4个方面来写：
·总体如何
·有哪些问题
·严重程度如何
·建议是什么
·除此之外，还可以围绕关注的问题，未满足需求补充分析
优化跟踪
在测试之后需要出优化的方案，测试优化的过程是循环的。
测试之后如果还有其他问题没有得到解决，可以结合其他的一些测试方法来得到。
问卷调研
问卷调查法是以书面提出问题的方式搜集数据的一种研究方法，研究者将所要研究的问题编制成问题表格，让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写，从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段，也可以用于产品上线后的评估阶段。
如果是想了解用户对产品上线后的满意度，可以使用问卷调研的方法。它比较适合去了解用户的认知态度，也可以附带了解用户的行为习惯，
问卷调研的优缺点
优点：统一性、灵活性、量化性、匿名性
缺点：（1）只能获得书面的信息，而不能了解到生动、具体的情况。（2）缺乏弹性，很难做深入的定性调研。（3）调查者难以了解被调查者是否认真作答，是不是自己填写的。（4）填写问卷比较容易，有些别调查者会随意选择，或者按照社会主流观点选择，这样会使调查失去真实性。（5）回复效率低，对无回答者的研究比较困难。
问卷调查的使用场景
适用于：（1）需要进行定量分析的调研。（2）需要匿名进行调研的问题。（3）对已有假设进行检验。（4）寻找问题隐藏的关联。（5）对产品设计用户认知及态度的评估。
不适用于：（1）发现和描述具体问题。（2）探索受访对象的模糊态度。（3）获取创新想法。（4）获取精确的行为数据。
问卷调研流程
1、确定目标：确定调研目的、对象、分析目的和应用对象。
2、调研方案：通过访谈、经验、理论等，确定调研框架，题目选项，分析思路，投放渠道，相本配比等。
3、问卷设计：问卷设计，问题美化，投放渠道。
4、问卷测试：多人测试，确保问卷的可读性，逻辑通畅
5、问卷投放：按照计划好的投放渠道进行投放，回收数据，数据清洗
6、问卷分析及填写报告：分析及报告填写，调研结果落地
数据分析
概述：通过在网站或应用中进行数据埋点，获取用户对产品的使用和行为数据，并进行基于产品体验优化的数据进行分析。
数据分析可以做什么？
1、可以做到用户从哪里来，来了多少
2、获取用户属性，用户地域，用户设备
3、访问了哪些页面，使用了哪些功能，消费了多少钱，消耗了多少时间
4、哪些流量可能存在问题，忠诚度如何，活跃度如何，有没有达到目标，和行业相比如何
5、流失情况如何，离开之后是否还回来
可以作为产品的眼镜和大脑，提供客观衡量的依据，可以持续优化改进。
数据获取方式的对比
日志文件：优势，完整的服务端请求记录。
缺点，日志的获取和清洗有过滤成本，许多页面操作无法记录。
JS页面标记：优势，数据获取可控、灵活，可以对页面操作记录进行记录，获取数据比较完整丰富。
缺点，需要在页面植入JS标记代码，某些情况下无法获取，如当用户禁用JS功能时。
常用的数据监控平台
1、第三方监控平台：如Google Analytics、百度统计、腾讯云分析等
2、自研平台
数据分析流程
1、监控 2、定义 3、埋点 4、测量 5、分析 6、优化
Web分析常用的指标
PV：是指页面浏览量，网页浏览数实施评价网站流量最常用的指标之一，用户每一次访问网站中的页面均被记录，对统一页面多次访问，访问量累计
UV：是指独立访客，是通过互联网访问、浏览这个页面的自然人
UPV：是指唯一身份综合浏览量
访问：是指在一定时间范围内，网站所有访问者对网站发起访问的总次数，从访客来到网站到最终关闭网站所有页面，记为一次访问
识别用户的方式：IP、IP+User Agent、cookie、User ID、设备ID、其他
复合指标
跳出率：指用户来到网站，只浏览了一个页面就离开的访问次数，占全部访问次数的百分比，简称“来了就走”。跳出率可以被用来衡量流量和页面质量，高跳出率表示访问者对着陆页面不感兴趣，没有继续访问更深入的页面。也可能页面设计存在问题，也可能是导入的用户不匹配。跳出率可以通过调整广告渠道，优化页面内容来降低。
退出率：访问者离开网站一次被记录为一次退出，某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高，代表某一页面可能出现了问题。
访问时长：网站停留时长，页面停留时长，应用使用时长。访问量是访问质量的一个衡量指标，较长的访问时间说明用户与产品进行了较多的互动。
访问深度：可以理解为单个用户平均访问的页面数，是PV/UV的比值。访问深度也是访问质量的一个衡量指标，可以考察用户是否和网站进行了较多互动。这个比值越大，代表网站的粘性越高。
转化率：指在一个统计周期内，完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算，例如注册转化率、付款转化率等，是一个重要的分析指标。
移动端基础指标
移动端的基础指标监测与web端略有不同，但分析思路大致相同。指标分为：新增设备、累计设备、启动次数、单词使用时长。
常见分析内容
流量分析（哪里来？）、用户分析（什么样的用户？）、行为分析（如何使用的？）、路径转化（表现如何？）、流失分析（粘性如何？）
A/B test
A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式，来获得具有代表性的实验结论，从而寻找到更好的产品策略。
简单来说，就是为同一目标制定两个方案，让一部分用户使用A方案，另一部分使用B方案，记录用户的使用情况，对比两个方案的结果，选择更符合的方案。
A/B test一般会在产品改版正式上线之前使用，来验证新的设计是否可以提高产品的表现。
A/B test可以测试的元素有：标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试，这就是两个测试类型单变量测试和多变量测试。
A/B test工具
Google Website Optimizer：搜索巨头提供的免费A/B test工具，一个很好的入门级工具，但是没有一些先进的功能。
Visual Website Optimizer：一个易于使用的A/Btest测试工具，包含功能有所见即所得的编辑器，单机地图，访问者分割和标签等。
Unbounce and Performable：集成着陆设计的A/B测试工具。
Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企业级测试工具
App Adhoc Optimizer：国内A/B Test工具，同时支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB测试服务的专业Saas平台
Optimizely：是网上现有的最专业的AB测试工具之一，它的价格要比其他的工具高很多（也可以免费使用一个月），它提供了一些非常好的功能。
Unbounce：对于登录页面的测试来讲非常不错，而且它不仅仅是个测试工具，还可以在无需自己编写任何代码的情况下来创建登录页面。
如何做A/Btest
1、确定目标，例如提高网站的付费转化率，降低跳出率等
2、测试方案，建立假设：购买按钮的颜色会影响点击率？缩短流程可以提高复费率？改变导航可以降低跳出率等？
3、创建相比较的两个版本，改变其中的变量
4、发布测试，将部分流量导向B方案，但不一定是5：5
5、数据分析，收集数据，对比AB版本的转化率、跳出率、留存率等
感谢阅读！
文章来源：站酷 作者：_微光
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com