写在前面

今年的“双十一”，朋友圈异常安静，没有了以前电商活动的氛围，没有漂亮的数据，没有晒图，有人说是用户消费疲软了？数据不会骗人，今年”双十一”一天的GMV还是比去年高了将近500亿，而且一大波尾款人在11月1日就已经结束。再加上直播电商，用户购买渠道变多了。李佳琦直播带货一晚就超100亿的GMV，说明用户的消费意愿和消费力还是很强的。算一下，50个李佳琦直播一晚上就能抵上“双十一”一整天的GMV，有点厉害。中国伟大复兴的道路还在继续，随着人民生活水平的提高，文化素养提高，互联网普及，消费力只会增不会减，只是战场在变化。

前些日子发了PP微助手的优化作品，本篇将结合改版思路和最近对互联网设计行业的思考进行一些分享，希望对大家有一定的帮助，欢迎大家来指正吐槽~

点击可以查看   PP微助手改版优化

流量变“留量”

互联网产品最重要的就是流量，没有流量，就算产品设计的再好，早晚也会运营不下去。纵观这些年移动互联网的发展，市场已经被分割的差不多了，各个行业都有龙头企业（社交：微信、购物：京东淘宝、出行：滴滴哈罗、外卖：饿了么美团、旅游：携程等等），各大互联网公司业务也趋于稳定，红利期已经过去，流量市场已经变成了“留量”市场。就像淘宝这种大流量的产品，也在吃流量老本。

回归到设计，在互联网公司做设计，一直在强调需要有产品思维、用户思维，然而在“留量”的时代，更需要我们具有运营思维，同行业的业务趋同、需求趋同，可挖掘的需求少之又少，可以打开同一行业的各类app一看，就知道产品形态大同小异。所以只能在“留量”里下功夫，既要减少存量用户的流失，还要在这基础上让存量用户创造更大的价值。必然，我们在做设计改版的时候就需要结合一些运营知识。

曝光

“曝光”一词相信大家都听过，在拍照时，“曝光”时间越长，照片细节就越丰富，当然过度“曝光”，也会让照片失真。在运营一个互联网产品时，也需要用到“曝光”，这里的“曝光”是指产品内容的“曝光”。

用户在进入某款产品的时候，都是带有一定目的性，通常情况都会经历三步操作，从看见内容，到与产品互动，最后得到想要的结果。

这里的“看见”，就要说到产品承载信息的曝光，合理的信息曝光才能更精准快速的触达用户。同时，运营同学最关心的数据和流量，也是需要安排合理的信息曝光才能有有效的数据和流量。在手机这么一小块屏幕想把所有内容都曝光出来，是不太现实的，就算能，也不合理。把过多的信息一下子全部曝光给用户，效果反而会很差。通常做法就是对页面进行楼层的分割，流量进行合理的分发。大流量的产品，每个楼层都需要单独部门去运营的，这样就会出现业务主次和优先级，不然各部门就会为了争夺"屏幕地盘"，无限撕逼。

作为设计师，就需要和运营部门做好以下确认：

1、楼层怎么分割，哪些楼层是产品部门控制，哪些楼层是运营部门控制，每个楼层显示哪些内容，设计师需要根据每个楼层的重要性，去定义屏占比

2、哪些模块需要首屏曝光，哪些是需要第二屏曝光，依此类推，这个至关重要，设计师就要考虑各类机型适配问题，比如iPhoneX一屏能显示下的内容，在其他手机未必能显出来，这样会直接影响曝光，导致数据不好（等着背锅吧～），严格来讲要根据实际用户使用机型占比去定义首屏显示的内容。

3、每个模块内容的信息层级，明确信息优先级才能结果为导向去做交互布局和视觉呈现，这时候就是你发挥的时候，对比、亲密关系、留白等等，都可以上了。

这里结合PP微助手的一些改版优化（非全套），分享一些改版思路。

PP微助手改版思路解析

项目背景：PP微助手是取代电视遥控器一部分功能开发的一款小程序，核心需求有几点

1、账号统一，PPTV时代的用户，大多都是使用的PPTV的账号，为了方便管理苏宁易购账号体系，会引流把PPTV尚未升级的账户统一升级合并至苏宁易购账号。

2、投屏功能，看影片终端还是以电视机为主，所以只做投屏，不做在线播放功能

3、智能语音，结合苏宁小biu智能语音系统，可以和电视机语音互动，实现交互功能

4、会员业务，移动端开通会员比电视端更方便，同时可以用一些运营手段促进用户开通会员

5、推送活动，电视机打开频次不如移动端，推送活动给用户，移动端可以实时看到

电商行业通常会把用户分成“大明”、“笨笨”、“小闲”三大类用户，在视频类产品，绝大多数用户都是“小闲”用户，来平台都是找乐子打发时间的。

思路一：架构改变（产品思维）：

PP微助手本来就是辅助电视机的，用户觉得用遥控器操作麻烦才会选择用小程序操作。在设计的时候，把用户当成是一个并不想动脑子并且很懒的傻子，产品设计越简单越好，否则用户干嘛要用小程序，遥控器挺好的，遥控器的大多交互都已经习惯，也没啥学习成本。

从用户角度分析，进入小程序无非就是找片源、看片以及看片过程中的一些基础控制操作（播放、暂停、快进等等），所以简化了产品整体框架，从原来底部5个tab（首页、片库、遥控、搜索、我的），改为3个tab（首页、遥控、我的）。产品呈现给用户的样貌更加简单直观，也相应的培养了用户心智，让用户对PP微助手这款小程序有个基本定位。

思路二：楼层分割（运营思维）：

首页改版前，按照iPhoneX的尺寸，首页第一屏也就曝光了3个分类，而且下滑到底总共也就几个分类，片源的曝光度不高，banner呈现也相对普通，就是那种正常电商类头部banner。同时交互成本也高，要点击“更多”才能看该分类影片的全部列表，要知道多一步操作就会多损失一部分用户转化。

改版后，针对第一楼层推荐影片采用电影宣传时的大海报样式，视觉焦点更强烈，同时曝光也更强烈一些，你去电影院的时候，看到的电影宣传海报，大多都是这类竖版的，用户已经有一定的心智模型，所以在这里采用竖版更为好一些。这些推荐影片在这里也作为“hook”，后面会讲。当然像电商类产品，首页需要考虑严谨的屏占比，这类尺寸肯定不合适。

第二楼层是影片的分类，采用文字tab左右滑动的方式，这种分类方式虽然没啥设计感，也普普通通，但是在一个分类众多的产品里，这种处理方法相当不错。减小了楼层的冲突，也提高了内容的曝光。像腾讯视频、爱奇艺、优酷，分类tab都是吸顶固定的，很直观的传达给用户影片信息。下拉的时候，这里采用feed流，用户在交互习惯上，连续操作时，对同一种交互会有惯性和依赖，上滑时查看更多影片，能满足用户的预期，也不会因为调整新的交互（上述的点击跳转查看更多）方式让用户反感。在视觉形式上，采用了横版的样式，是为了和第一楼层形成对比，也是为了节省屏幕空间，能曝光更多的内容。二楼的影片内容也可以分布一些“hook”

搜索也是一种用户找片源的方式，后面再讲，这里要考虑到流量分发的情况。

思路三：引导用户（运维思维）

按照福格模型B=MAT，完成行为的三要素：动机、能力和触发器。

用户进了影片详情，说明已经有动机了，这时候需要抓住机会，按照产品需求可以完成两个行为目的，一个是让PPTV账号升级成苏宁易购账号，二是转化成会员用户。

这里要看一下进入详情的数据，是“hook”进来的用户多还是非“hook”进来的用户多。如果是“hook”进来的多，说明用户主观意愿不是很强，这部分用户可能会流失，如果是非“hook”或者搜索进来的更多，说明平台用户主观意愿更强，有较高的粘性，更容易促进会员的转化。

对平台来说，希望用户进来完成两条路径：

1、未登录的用户，点“推送”和“开通会员”按钮，进入下一步登录或者升级账号流程。当然这一步会流失用户，部分用户会反感登录这种操作。

2、已登录的用户，可以快速推送影片，完成自己的看片目的，如果是会员影片，这里就需要用户先开通会员，当然只是引导，还会有一部分用户不想开通会员，选择离开。

防止用户过多的流失，就需要平台一定的干涉，加强登录或者开通会员的意愿，可以从以下几点入手：

1、沉浸式体验，进入详情，头部区域自动播放影片花絮或者预告，快速让抓取用户眼球，增加下一步操作的意愿。

2、醒目的豆瓣评分，“hook”影片选择一些评分高的，用户针对豆瓣评分已经有一定的认知，评分优质的影片，用户更有意愿观看，更容易促进下一步动作，提高会员的转化率。

3、各类标签，比如：首播、独家、会员免费、会员半价、4K高清等等，能清晰定位影片，捕捉各类用户看片心智。

4、会员相关信息展示，未登录的提示“登录领券、限时活动等”，非会员提示“会员权益、开通会员的利益点等”刺激用户。

思路四：优惠券吸引用户（运维思维）

改版前优惠券和体验券在不同入口，流量分散了，券的目的就是要让用户去使用，需要缩短路径，更直观的展示给用户，能让用户快速做决策。如果券种类多的话，还需要区分各种券样式，需要让用户快速定位想使用的券。

其中已使用和已过期的券对用户来说就是已经没用的券，并不需要再用单独的tab分类，并且弱化处理。因为PP微助手会员券相对比较少，不像电商一样，会送很多商品券，所以用最简单的形式展示给用户就行。

值得注意的一点，不是说已过期的券就没用了，如果运营把控好节奏，发券有一定规律，用户看到过期的券会有一定的挫败感，就会经常来关注券。“废券再利用”也能增加用户的粘性。针对快过期的券，必要时候可以做二次提醒，给用户造成紧张感，会激发用券欲望。

说服用户下决定，一般从以下三个点去考虑：时间紧迫性、暗示稀缺性、后果恐吓性

流量分发和流量承接

产品的流量来源有很多，除了自身用户进入产品的流量，还有线下广告、线上广告、分享链接等等各种来源。目前主要的流量分发方式包括：搜索分发、算法分发、社交分发、人工分发、付费分发。PP微助手主要应用算法分发、搜索分发、人工分发。

先讲一下“hook”，在电商里是“钩子商品”，这里我把“hook”当做是“钩子影片”，运营精准推荐的一些“hook”，会取到不错的转化效果。

用户在产品内的行为路径是不可控的，一大波流量进入首页，每个用户都有自己的目的，所以需要对用户进行分流。一部分用户去了搜索，这类用户目的很明显，知道自己想看的影片名称，这部分就是搜索分发的流量；一部分用户被“hook”勾走了，"hook"激发了用户的看片动机，这部分就是人工分发的流量，需要运营去干预；一部分用户在不停的浏览，在浏览过程中找自己的影片，产品会分析用户行为，显示千人千面的首页，这部分就是算法分发的流量。

有流量分发，那必然就有流量承接，流量承接都是相对流量分发的，在电商产品里，站内的流量承接一般都在商详，以及对应的后置链路（订单确认、结算等等），从各渠道进来的流量，最终汇总在商详。在商详，会突出各种利益点和产品自身优势去刺激用户下单。至于利益点，活动时候的各种优惠信息就是典型例子，产品自身优势，比如：淘宝的先享后付、京东有京东物流次日达等等。在PP微助手这里流量承接就是影片详情以及后置链路会员套餐页，具体可以看上面的“思路三”的分析，怎么去承接流量，怎么去促进转化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

1.准备工作

设计工具

Sketch

精不精通Sketch，就看插件用的溜不溜，推荐个网站：http://sketch.cm/

无论是学习Sketch，还是搜插件、找素材，都是Sketch使用者的优选项。

Sketch是OS X平台独占，需要下载Sketch可以到这个网站去下载。

这里推荐个Mac平台应用的下载网站，使用Mac的小伙伴可以去这里下：http://xclient.info/

我个人是很推荐使用Sketch做UI设计的，软件本身已经提供了大量的IOS和Android系统设计资源，配合各类插件，几乎无所不能。

Photoshop

相比于Sketch来说，体型胖了点，在UI设计上略逊一筹。不过因为Sketch是OS X独占，所以因为平台限制的原因，用PS设计也没有问题。

我很久没用它做UI设计了，也没啥可推荐的了。

Adobe XD

全称为Adobe Experience Design；这是一款集原型、设计和交互于一体的小清新时代风格的设计软件。虽然有人说，Adobe XD将会是Skech的劲敌。然而在windows系统当中，Adobe XD的确是产品原型设计领域最顺手的设计软件。它使用简单，界面整洁，虽然之前一直使用的是Axure 8.0，但看来，Adobe XD在界面、素材以及设计操作上的确甩了Axure好几条街，至少它成功的吸引到了我。

做好版本管理、文件归档的工作

专业水平不仅体现在设计能力之上，优秀的管理能力也是重要的职业素养。

合理规划好设计版本，进行明确的文件归档工作，有助于提高设计师的工作效率。

这里不赘述了，每个人有自己的版本管理方式，不过目标只有一个：清晰高效。

2.关于手机的基础概念

这里的概念性内容不要强行记忆，理解即可，它是做移动UI设计的理论常识。

手机分辨率

手机屏幕的像素点数。比如750*1334、720*1280等等，细分还有物理分辨率和逻辑分辨率，这里不扩展讲解了，想了解自行百度吧。

手机分辨率牵扯到的就是工作时设计稿的尺寸，只要记住设计尺寸就可以了。

屏幕尺寸

手机对角线的物理尺寸，单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

屏幕尺寸和设计其实关系不大，主要是用来计算屏幕密度的。

屏幕密度(DPI或PPI)

每英寸的像素点数。简单理解就是屏幕密度越大，画面越逼真细腻。

下面是屏幕密度的计算方法，范例是5英寸，分辨率为1920*1080的手机：

屏幕密度牵扯最多的是安卓系统，安卓手机屏幕本身的密度种类非常多，这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题，这个我们下面会提到)

3.基础设计规范——IOS系统

这是苹果的开发者官网：https://developer.apple.com/

这里有持续更新的最新设计规范和资源模板，虽然是全英文的，但并不影响阅读。

设计师应该学会从官方获得设计资料，这比其他途径获得的资料更加全面和权威。

最新系统版本：IOS 11.4.1

中文字体：苹方黑体

英文字体：San Francisco

官方系统设计模板下载：

https://developer.apple.com/design/resources/

官方系统设计字体下载：

https://developer.apple.com/fonts/

下图是截止到目前，可能还需要支持的机型和对应的设计尺寸：

设计稿尺寸

只推荐750*1334的尺寸来做设计稿，这是向上向下都最容易适配的尺寸，包括用这个尺寸去适配Android版。

除了IPhone X的比例特殊外，其他的IPhone比例几乎差不多的，比较容易适配。

Sketch设计

使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸。

导出的@2x图适配IPhone 5/5S/5C/SE   6/6S/7/8

导出的@3x图适配Iphone 6/6S/7/8 Plus    IPhone X

Photoshop设计

画布就建成750 * 1334尺寸的即可，在这个前提之下，

导出原尺寸图片加后缀@2x，适配IPhone 5/5S/5C/SE   6/6S/7/8

导出1.5倍图片加后缀@3x，适配IPhone 6/6S/7/8 Plus    IPhone X

常用数据

下面的内容苹果官方提供的模板文档其实都有对应的数据，可以去官网下载。

字号使用建议(这个不是硬性规定，根据视觉效果酌情使用)

导航文字            34-38px

标题文字            28-34px

正文文字            26-30px

辅助文字            20-24px

Tab bar文字       20px

图标尺寸建议

APP应用图标，建议使用1024*1024尺寸去做，逐级缩小去应用到各种场景中。

SKetch已经提供了IOS和Android系统的APP尺寸图标模板，直接使用就可以了。

界面适配

程序内部的功能界面：这种界面通过写成自适应的界面可以很好的适配各种机型；如果有特殊的布局要求，也可以让开发根据特定机型去调整，不需要单独为各类机型再做设计稿。

覆盖全屏类的界面：比如闪屏、启动页、引导界面、插画页面等等，这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。

其他的IPhone机型，遇到这种界面，整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。

IPhone X的安全区域：IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后，中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿，请一定设置好参考线，不要把内容做进这两块区域内部。

IPhone X规范：iPhone X 人机交互指南及其设计细节

简单理解APP构成

下图是IOS开发工具Xcode里的一个空白页面，图片的文字标注请仔细阅读。

本质上，开发写APP界面和设计做设计稿是一样的，只不过两者实现方法不同。

APP的构成远远要比上图写的复杂的多，我们这里使用最简单的理解方式。

设计稿的标注

根据上图我们可以理解设计稿和程序之间的关系：

设计稿里的按钮、文字、图标、列表、背景色、线条等等所有的设计元素，

在Xcode里都有对应的控件，设计元素必须使用对应控件，才能在APP的界面里显示出来。

设计稿的标注，实质上是标注的各类控件的属性以及相对于其他控件的关系：

设计稿中：

文字的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

图片的自身属性：宽高、间距、距离、透明度。

至于标注在上篇文章有详解：一款APP从设计到切图标注适配全记录，这里就不累赘了！

程序的对应控件

Label的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

Image View的自身属性：宽高、间距、距离、透明度。

实际上各类控件的属性也要比这个复杂的多，这里是最简单理解的举例说明。

如今使用本地化插件Sketch Measure，几乎不用手工标注，标注导出HTML后，扔给开发，他们想看什么属性自己点击查看就是了，所以我们这里了解下标注原理就行。

而一些线上工具的插件，比如蓝湖、墨刀、Mockplus等等，功能更加丰富，各位根据自身情况灵活运用吧。

Sketch Measure去http://Sketch.im下载

设计稿的切图

IOS目前常用的还是输出2套PNG图片。@2x、@3x的后缀，是为了在Xcode导入图片资源时，识别对应机型所用的图片。

Xcode里提供了相应的位置，相同命名图片会根据后缀填入到对应的位置。

目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。

但是对于UI设计来说，常用的图片格式就以下几种：

PNG      常用图片格式，没什么解释的，目前大部分产品还在使用此格式；

WebP    安卓的图片格式，同等质量图片下体积非常小，非常推荐给安卓使用；

SVG      矢量格式，完美解决适配问题，但也有部分缺点。

想具体了解WebP和SVG，可以查看之前的文章。

切图输出规范

前提：同一类型、位置的切图，请保证切图尺寸、规格一致，图片尺寸为偶数大小。

1.有操作功能、可点击的功能性切图：最小点击区域问题

苹果官方提供的能准确点击的最小点击区域：88 * 88px;

小于这个范围也可以点击，但是点击不灵敏，体验较差。

对于比这个范围小的可点击按钮，周围需要用透明区域填充后再输出切图。

解释下为什么用透明区域填充来扩大点击区域范围：

图标这东西，对设计师来说没区别，都是图片。

但对开发来说，可操作和不可操作的图标是两种类型的控件，图标的样式不过是传给该控件的显示图片罢了。

可操作的功能图标在Xcode对应控件是UIButton。

对控件来说，如果不在代码里明确固定控件的大小、点击区域等等各类属性，设计师传给我多大的图，这个控件就会被这张图撑到多大。

你给我一张40*40的按钮切图，如果开发什么都不做，那这个UIButton在手机界面里就被撑到40*40的大小。

我也可以在Xcode里写几行代码，固定图片的大小就是40*40，扩大UIButton这个控件的大小变成88*88，这样这个控件的点击区域也扩大了。

但是一张规范的切图就能解决的事情，为什么还要在代码里再手动加几行呢？

一个可点击按钮需要加一行代码，整个APP就可能多加上百行上千行的代码。

规范的切图也是可以提升产品开发效率的。

2.非功能性切图，比如列表图标、说明图标等，按统一规格的最小尺寸切。

这么切还可以减少一些程序因图片资源大小导致的体积大小问题。

这类切图，对应的是UIImageView控件，就是一张图片，无操作，只是占位和显示。

所以你按照相同规格，最小尺寸切就可以了。

有朋友问：一定要切正方形的吗？如果图标都是30*20的，那我统一切30*20的行不行

答案是：可以，这个没有完全的硬性规定。虽然我是设计师，但也会去写一些IOS程序。正方形规格切图就是为了方便开发，当然还是推荐你使用正方形规格来切图。

但实际开发过程中，只要保证同一位置，切图规格统一就可以。

切图输出状态：

同一按钮、元素的不同状态，要明确命名对应状态之后，分别输出对应图片。

下图示例按钮的选中状态多出现在游戏APP中，这里仅表示说明。

命名规范

不要使用中文、特殊字符，请使用英文、下划线、数字对切图命名，数字不要打头。

命名方式尽量清晰，推荐采用：种类_位置_功能_状态

示例说明：

btn_homepage_seach_normal@2x.png

开发看到就会明白：这是位于首页，处于正常状态的搜索按钮2倍切图。

4.基础设计规范——Android系统

这是Android Material Design中文版的地址

https://www.mdui.org/design/

Android的英文版地址

https://material.io/

最新系统版本：Android 9.0

中文字体：思源黑体

英文字体：Robot

Android不整理各类机型的尺寸规范了，数据零散，难以整理。所以我们从屏幕密度这里理解设计规范就可以了。

Android手机屏幕密度

上文我们提过屏幕密度的计算方式，安卓手机因为各种屏幕尺寸和分辨率，导致如果单纯按照数值计算，可能屏幕密度种类会多到让设计师崩溃。

所以为了解决这个问题，安卓手机出厂时，屏幕有自己初始的固定密度，系统会根据这些屏幕密度自行适配，下图是对应的屏幕密度表：

Android的开发单位以及设计尺寸

正因为Android手机分辨率多样，为了保证同一设计在不同屏幕密度的手机上显示效果一致，Android系统使用了下面两个单位：

dp：android开发单位，相当于比例换算单位。使用该单位，可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果；

sp：android开发文字单位，和dp类似，也是为了保证文字在不同密度的屏幕上显示相同的效果。

当屏幕密度为MDPI（160DPI）时，1dp=1px

当屏幕密度为MDPI（160DPI）时，1sp=1px

按照上面两个公式的换算，同样dp大小的图片在不同屏幕密度的手机上如下图所示，

基本可以保证图片显示效果在各类手机上相同。

设计稿尺寸

通过上面的分析，在xHDPI这个密度等级下，倍数关系为2，推荐使用720*1280尺寸做设计稿，换算方便，适配容易。

不过目前的现状是，如果公司的产品有IOS和Android两个版本，基本上设计师只会做IOS的版本，然后套用给Android，这样做也是可以的。两者的切图，在这个设计尺寸之下是可以通用的。

设计稿的标注

推荐使用dp和sp进行标注。但是呢，如果你用720*1280做设计，使用像素单位标注，现在也不会影响什么。

因为前面已经提到过IOS的标注了，这里也就不再赘述了。

设计稿的切图

理论上，对于Android系统来说，如果你想完美适配各种机型，应该为不同的屏幕密度提供不同尺寸大小的切图，而Android的开发工具也为不同的屏幕密度提供了对应的资源文件夹。

但实际上，并不需要提供上面密度表那么多套的切图，程序安装包的大小基本就是由于图片占用了太多的位置。

所以需要提供多少套图片，请和公司的开发沟通，确定你们的产品实际支持哪些屏幕密度。

图片格式

WebP和SVG

我个人是推荐现在为Android系统使用WebP格式，体积小，显示效果好；

而SVG这种矢量图片格式完美解决了Android多套切图的问题，一套切图，完美适配各种屏幕密度。

最小可点击区域

48dp：这和IOS的最小点击区域性质是一样的，都是考虑到手指点击的灵敏性的问题，设计可点击控件的时候要考虑到这一点。

更多的注意事项和IOS切图是相同的，这里不再赘述了。

5.UI设计师的职业道路

如今的移动UI设计行业已经很成熟了，针对移动UI设计的便捷工具层出不穷；移动UI设计的理论体系知识也已经渐渐完善。但这些都是外部因素，社会发展了，我们跟着一起向前适应就好了；

但对于设计师工作能力的提升，还需要有明确的方法体系，更要有清晰的职业规划！

很多设计师工作了几年，却一直在原地踏步，苦苦挣扎，甚至没有职业目标。

目前我工作5年，就从我自身的体会来分享我自己的方式，当然资深的、精英设计就别跟我较真了，我代表的是那90%还在向上努力爬的普通设计师~

工作能力，不仅仅指的是自身的专业技术水平，还包含了各种综合性能力，请务必对自己有明确的职业规划和能力发展轨迹。

工作0~2年

这个阶段对于新人来说，是一个设计能力和工作经验的快速积累过程，不夸张的说，这两年内的经验可以决定你之后的职业发展道路是否顺利。

此阶段目的：提升设计专业能力、完善理论知识、积累实际项目经验

这个阶段就别想着一专多能了，先把那个“一专”搞好就可以了，当然不是不让你学习别的知识，而是说重心应该发在提升目前的专业能力上。

提升设计能力：

一方面，通过公司的实际商业项目提升能力，这个没什么可说的；

另一方面，业余时间务必进行大量的作品练习，无论是临摹、还是重设计都可以，目的就是一个：量大 从优！

临摹请用高质量作品，临摹一堆垃圾还不如不做，临摹请务必做到99%以上的相似度，不然那不叫临摹，临摹的过程是考验软件功力、设计技法能否完美复制的过程。

重设计请使用成熟知名产品，不要重设计一堆垃圾应用，成熟产品每个界面的布局、样式、功能、逻辑都是经过深思熟虑后呈现给你的。

重设计的目的是要体会产品背后反映的设计意图，不是为了重设计而重设计。

所以重设计之前请自己思考原产品这么做的目的再动手。

完善理论知识：

没有理论体系方法的支持，在设计道路上是走不远的。

现在关于UI设计的知识网站已经很多了，当然不局限在这类专业性网站上。

人人都是PM、UI中国、25学堂等等很多这类网站都是学习理论知识的好地方。

当然，你也可以关注我嘛~（给自己打个广告，吼吼~）

工作2~3年

3年对于互联网从业者是一个坎儿，其实这是相对于职业规划来说的。

通过前两年的积累，对于UI设计本职工作已经可以胜任了，接下来的要考虑的是个人的职业发展规划了。

此阶段目的：拓展技能、明确职业目标、为进大厂做准备

拓展技能：

这个阶段可以考虑“一专多能”的多能了，作为UI设计师，可以学习的东西实在太多了，交互、动效、产品设计、开发等等。

不要求你达到那些专业从业者的地步，你要学到专业程度，还干什么UI设计啊。

目的是为了拓展自己的技能树，为自己提供更多的竞争力，这个习惯要一直保持伴随之后的工作……

明确职业目标：

设计师最怕的就是迷茫，如果说前两年因为刚入行，对行业，对自身都不完全了解，那情有可原。但工作两年后，对自身的情况再不清醒那就说不过去了。

可以从以下方面考虑：

是始终坚持在一线岗位的设计技术大牛，还是想做设计管理者，亦或者想从UI设计师转职成交互设计、产品设计等等。

工作两年已经对自身，对行业有理解了，自己的能力是否适合设计岗位，对设计的热爱是否能经久不变都可以作为参考调节了。

为进入大厂做准备：

刚工作，可能限制于能力实力问题，委身于小公司。

但是！虽然我们身在小公司，但心要在BAT CAO  TMD，

Apple、Google也不是不可以！

Skr！Skr！

这阶段可以为大厂准备一下，当然不是让你工作两年多就去面试啊，如果你的能力特别突出，就当我放屁吧~

意思是，可以以进入大厂为目标，综合性的考虑自身的缺陷并尽量弥补。

千万别以为就在小公司将就着干吧，反正拿的钱也差不多，大公司的滋味你是体会不到的。

拿同样的薪水，在小公司和大公司的感受可是完全不同的，小公司对个人的眼界、人脉、能力提升的帮助都不可能和大公司相提并论。

工作3~5年

对互联网人来说，3年一个坎，5年一个坎，都是职业规划的节点时间。

3到5年的设计师，如果你真的用心工作了，一个人可以实实在在的顶起来一个项目。

我们上面说，为进入大厂做准备。在这个阶段，可以考虑进入一些中大型企业，提升个人的综合能力、拓展人脉。

部分企业也比较喜欢要这个阶段的设计师，有工作能力，职业道路又刚开始，搞不好可以在公司培养起来。

此阶段的目的：提升综合能力、拓展人脉圈子

这时的个人专业水平其实已经不是问题，继续在工作中磨练积累就可以了；

这里需要的是打开个人在职场上的道路。

说实话，即使是互联网行业，搞技术除了要保证自身技术过硬之外，会不会发展人脉，能不能提升综合能力才是最后职业道路能不能走远走高的决定因素。

提升综合能力：

与各部门的沟通能力、对设计资源的协调能力、在公司业务上的话语能力、对项目的把控能力等等，都算综合能力，这是对内部的能力。

不要以为对设计师来说，我闷着头接需求，做设计就可以了。

这样的设计师，也许你可以踏踏实实当个接需求的小设计，但你永远也只是一个这类的设计，对于有更高更强的职业追求的人来说，没有帮助。

所以，张开嘴、迈开腿，一步一步尝试去推动自身进步吧，这个没什么技术性方法，必须要自己亲自去做。

拓展人脉圈子：

人脉对个人职业道路的帮助，远远要比专业能力的帮助要大的多，这是对外的能力。

设计师的圈子，说实话不算大。搞技术的，本身就坐办公室，而做设计的人本身性格也有一部分原因，但还是请你努力拓展自己的人脉。

对于自身的专业圈子，努力分享自己的设计经验、工作心得，总结自己的体会，发布到各类设计专业论坛上，积极的帮助别人，这都算一种拓展方式。

时间久了，就会结识非常多的设计界朋友，设计大牛也会逐渐注意到你，这些都是你职业道路上的宝贵资源。

还可以认识几个不错的猎头朋友，有好的职位，他们都会优先想到你的。

作者自述

这也是我写的最后一篇关于基础规范类文章，也算是整理一下工作到现在的基础常识类内容，以后不再写这类基础文章了。

人总要进步的，设计师还是要靠干货作品来撑腰的，对吧。

以后发的内容都是我做过的实际商业项目，我会把设计经验和工作方法融入到这些作品实例里来写，这总比我单纯讲理论知识要强。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

沟通是为了完成设定的目标，把信息、思想和感情，在个人和群体之间传递，并达成协议的过程。沟通目的一般分为：说明事物、表达感情、建立关系、达成目标。

需求沟通是设计师和团队围绕需求目标，信息传递的过程，是设计师展开设计工作的起点，贯穿整个设计过程，沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性，对很多新手设计师来说，在需求沟通过程中，可能会碰到一些共同的沟通问题，比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。

针对这些问题，本文尝试梳理需求沟通过程中几种典型场景和方法，以期帮助新手设计师快速识别需求沟通中的常见问题；提升沟通效率，快速达成共识；掌握沟通窍门，更精准高效的产出需求。

本文主要分成2个部分，第1部分主要聚焦在需求沟通过程中的不同阶段，面对的典型沟通问题和解决方案；第2部分主要介绍沟通中一些常见的技巧和方法。

Chapter 1

——————————

需求沟通的目标和方法

1.1 设计师在不同需求阶段的沟通目标

通常设计师在处理需求的流程大致可以分成4个部分：了解需求->分析需求->探索方案->实现方案。在不同的阶段，设计师要解决的核心问题不同：

了解需求阶段，设计师和产品针对需求目标进行讨论，并和团队就产品目标达成共识；

分析需求阶段，设计师和产品针对产品策略合理性进行讨论，并提出体验诉求；

探索方案阶段，设计师探索设计方案，并和产品就商业目标和体验目标达成平衡；

实现方案阶段，设计师和产品协调优先级，调整方案，确保方案最大程度实现还原；

1.2 如何更好的了解需求，明确目标，达成共识

在了解需求阶段，设计师需要了解需求来源、背景、要解决的问题和目标。总结来看需求可大致分为2类：一类是需求目标较明确，产品有明确要解决的问题，如提升产品体验、满足某个用户明确需求、完成某个产品目标；一类是需求目标较模糊，比如挖掘用户潜在需求，探索新的业务方向。

对于目标较明确的需求，在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后，即可进入需求分析，策略讨论阶段。

但对于方向探索类需求，如何协助产品探索目标，和团队达成关于目标的共识，是这阶段的沟通重点。以一个创业的项目为例，产品想做一个图片社区，原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下：

在产品的催促和时间压力下，设计并没有围绕产品定位、用户群、产品目标进行充分讨论，也没有和团队成员达成共识。在这种情况下，选择跟随产品的节奏，陷入了被动执行。由于前期并没有针对需求进行细致的推敲讨论，方案的输出过程变成了试错的过程。产品方向修改频繁，这种被动的沟通方式，导致整个团队目标感不清晰、理解混乱。

经过反思和问题总结，设计师发起了主动沟通，运用设计方法协助产品明确需求，提升方向说服力，探索如何就目标和团队达成共识。首先，需要和产品明确用户群，并寻找用研协助，或发起快速访谈了解用户；其次，组织团队相关成员发起关于产品目标的讨论，围绕产品决策人给出的产品初步方向，团队成员每人写下对产品的期待，提炼总结团队成员的想法，提炼总结产品目标；再次，根据用户访谈材料，利用亲和图法，提取关键词，从用户诉求中洞察提炼用户目标。最终，产品目标得以明确，团队也取得了关于目标的共识，同时通过快速demo，来验证优化，项目得以顺利进行。

1.3 如何更好的分析需求，确保产品策略合理性

在了解需求背景、用户群体，明确了需求目标后，进入需求分析阶段，通常产品会给一个商业假设：假如做了xxxx，用户就会xxxxx，产品可以达成xxxx目标。以一个需求为例子：产品想做一个任务体系，通过福利吸引用户做任务，从而拉动产品活跃。

如果设计师完全按产品给的商业假设输出，方案产出过程貌似很顺利，但可能隐藏了很多问题。以本需求为例，产品的商业假设逻辑是：用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求；

但这个假设是正确的吗？设计师的价值就在于，这个时候要能找出产品假设中的问题。通过对用户的了解和洞察，还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题，才能顺利实现产品目标。

通过对用户实际参与过程的分析，用户在看到任务奖励后，实际需要权衡的内容很多，如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大？分析需求过程关键就是找到这些问题的对应策略，强化用户参与的动力，降低参与难度。

1.4方案探索阶段，如何平衡商业和体验诉求

在方案输出阶段，设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标，很多时候希望把达成商业目标的手段做的很强；

当发生围绕商业目标和体验问题，谁都无法说服对方的情境时，设计师该如何沟通呢？

首先，作为设计师要摆正沟通立场，理解商业化是任何产品的根本目标，体验也是实现商业化手段之一，我们反对的不是商业化，而是简单粗暴的商业化方式，商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断。

其次，应能够识别对于曝光越多越好，越直接越有效的这种思维方式，通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时，最节省力气的做法就是提升曝光等方式达成目标。

当发生争执时，如果仅仅站在设计立场上，用设计理论说服对方，通常效果有限。尝试找到产品实现商业化目标背后的逻辑，不要用手段代替目的，探索更好的实现商业化方式的可能性，比如尝试在合适的路径上推荐，或探索用户更容易接受的内容形式。

1.5 方案实现阶段，如何协调优先级，推动方案最大程度还原

在方案实现阶段，很多时候由于时间紧张，产品仅完成最核心功能，部分体验相关功能一直无法得到优化。

通常如果方案产品认可，但推进意愿不高时，可能的原因是：1.当前方案不是核心KPI，产品要优先保证对kpi影响最大部分完成；2.投入产出比不划算，方案在产品看来投入的人力/时间/资源过大，并不值得；3.方案改动可能引发数据风险，产品并无法确保改动一定能带来数据的成长；4.资源紧张，产品也很想实现方案，但项目时间/人力/资源真的很紧张。

这种情况下，首先，要和产品够分沟通他们的疑虑和担心，到底是哪类问题；其次，从心态上也不用急于一时，做好长期推动的准备；还有，充分优化方案，消除产品疑虑，寻找合适时机进行推动。在项目逐渐迭代的过程中，对需要推动体验优化点持续关注，尽可能放大方案价值，结合新的需求点，思考能否从价值拓展角度，如提升品牌价值、扩展性等角度提升方案说服力；同时，从缩小成本和打消产品疑虑角度，做足准备，推动方案。

Chapter 2

——————————

沟通技巧的问题

沟通的过程是一个信息螺旋传递的过程，表达者的信息传递到接收者时，因为背景、环境、理解能力、传递完整度等差异，接收者仅能接收部分信息，而接收者在理解消化后，再将自己的信息传递出去，这个过程循环往复，会导致两个最常见的沟通问题：目标偏离以及信息衰减。学习适当的沟通技巧，可以有效减缓目标偏离和信息衰减。

2.1 如何防止沟通目标偏离

要防止沟通目标偏离，首先要理解什么会导致目标偏离？1.目标不清晰，比如本来想找产品聊下某功能体验不合理，但因为产品一直说项目时间紧，被倾诉了一通苦水后，忘记了本来要沟通的问题，转移到了其他话题上，最后不了了之；2.缺乏同理心，比如当发生争执时双方不能互换角度，产品一直在说实现目标手段和现阶段问题难点，设计在说体验问题和设计规范，双方互不妥协，陷入争吵；3.陷入情绪，表达观点时陷入情绪化的争执。

针对这三个会导致沟通目标偏离的问题，可使用以下技巧：

① 设定沟通目标并保持关注：在每次沟通前想清楚自己的目标和底线，尝试用全局视角分析自己设定目标的合理性；在沟通过程中要经常反思当前沟通的问题是否已偏离了目标，对达成目标是否有帮助；发现目标偏离可尝试改变节奏，思考接下来说什么有助于达成目标；

② 换位思考：能够倾听对方的问题和困难，尝试寻找解决问题的办法，而不是一直表达诉求，无助于问题的解决和推进；

③ 控制/倾听情绪：美国心理学家埃利斯创建的ABC情绪理论，拆解了事件发生和情绪之间的关系，指出事件的发生并不是导致情绪的直接原因，我们持有的信念才是。因此在沟通中不要加入太多内心戏，过度解读事件。比如产品让设计反复改稿时，可能会解读为产品在故意刁难，尝试了解反复修改背后的原因，可能对解决问题更有帮助。

2.2 如何减少沟通过程的信息损耗

沟通过程中表达者的模糊表达和接收者的理解偏差，会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达：“设计稿尽快输出”、“页面太结构化了，想要更社交化一点”、“能不能做得更有创意一点，更有趣点”当出现这些类似的沟通语句时，可以尝试通过具体化方式，进行确认。

对于可能会出现理解偏差的问题，重要的信息用自己的语言组织后再次确认“你的意思是xxxx吗？”；重要的沟通后，可梳理沟通记录，企业微信同步周知确认；方案的沟通过程可以快速画草稿确认；尽可能的减少因为理解不一致导致的沟通问题。

总结

在需求沟通过程中，我们要对不同阶段的沟通目标有清晰的认识，围绕目标进行充分准备，运用设计方法了解用户、了解产品核心诉求，做到知己知彼，才能进行有效的沟通。

在沟通过程中保持对目标的关注，始终牢记沟通是为了解决问题服务的。适当学习沟通技巧较少沟通过程中的信息损耗。

沟通是解决问题，共同协作的重要方式。如果你觉得自己不善于沟通，可能要反思下沟通前是否想清楚自己的沟通目标，对于解决问题的过程、方法是否熟悉，准备是否充分？当我们能做到知己知彼、胸有丘壑时，沟通可能就变得简单起来。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

一、设计和艺术的区别

艺术：

艺术是感性、天马行空、富有创造力的，表达创造者的个人意识。

设计：

设计是理性、精密的，为了解决用户的问题

（你看得懂吗？你有什么见解？为什么大家见解不一样？这就是艺术的魅力）

二、用户体验及用户体验设计

什么是用户体验？——————使用一个产品时的主观感受

用户体验设计？———————为了提升用户体验而做的设计

1.用户体验设计

首先要解决用户的某个实际问题--让问题变得容易解决--最后给用户留下深刻的印象。（视觉只是其中一部分，并不是设计的全部）

Eg：充电插座的苦恼--错开位置

尿液四溅--厕所里放一只苍蝇，用户会去瞄准上厕所（设计美观且有趣味性）

2、用户体验设计的特征

(1)严谨、理性、创意

先关注要解决的问题----其次思考有趣的创意帮助用户得到更好的体验。

(2)提供特定问题的解决方案

设计目标是什么，为什么人解决问题，如何解决

Eg:钢铁侠u盘死死按住关机键；楼梯是为残疾人设计的吗，我懵了？

(3)不让用户思考

用户感到挫败，会放弃。你的设计不要用户一头雾水。

(我到底怎么走?)

(4)趣味横生

尿液四溅贴提示语效果不好，放一只苍蝇效果很好？

因为：抓住了用户的心理和行为习惯，同时充满趣味，吸引用户

Eg：path推出的商店功能，在里面买自己喜欢的贴纸，摇晃手机贴纸也摇晃，感觉很好玩吧～带来好的体验感

3.用户体验设计师遇到问题如何思考

三、各种设计师的区分

1.怎么和别人解释用户体验设计师

A：“你用一个网站的时候，有没有出现：某个功能找不到了，点击按钮没有反应，填写的信息不知道哪里错了总是不能提交成功？”

B：我们的工作就是改善这种情况，让你使用网站时有一个好的体验，同时能让用户感到愉悦和不受打扰。

工作中：除了考虑用户还要让公司有利可图

2.交互设计师

通过分析用户心理模型、设计任务流程、运用交互知识把业务逻辑（需求/功能）以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的平衡点）的过程。

即：从公司战略角度考虑问题，在公司需求的基础上让用户觉得好用、易用

交互设计师的产出物：不是原型，你不是画图的工具，重要的是解决问题的能力

工作内容：竞品分析文档、用户反馈整理、流程图、设计草图、原型...

3.视觉设计师

原画：设计者很强的手绘能力，作品充满艺术表现力

平面：传达思想，较强的感染力

推广运营设计师：突出重点抓眼球

UI：良好的审美、具备一定的交互知识

                      (原画)                              (平面)                                              (推广运营)

4.用户研究员

通过各种分析和研究，深入了解用户特征，用户行为习惯，为产品运营推广提供必要的方向

工作内容：市场分析、竞品分析、创建人物角色、问卷调查、焦点小组、用户访谈、可用性测试

四、用户体验设计师的作用和价值

1、用户价值商业价值

用户通过优秀的设计快速达到目标，企业也会财源滚滚

eg：改变一个按钮的颜色，点击率提高35%；优化操作流程，转化率提高50%...

2、项目价值

跟进各个环节，保证产出物质量

推进统一及标准化，提升设计效率

促使项目流程合理，有规划

五、交互设计师的作用和价值

1.工作内容

分析重塑需求;与用研配合，了解用户特征与行为；设计结构、流程、界面、动态效果；跟进视觉、前端、开发；及时整理上线问题，准备下次迭代...

2.品牌价值

维护和突出品牌形象，统一的设计理念

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

///

它是如何开始的-固定屏幕

在千禧年来临之前，我们首先开始在单一视图屏幕中进行UI设计，这类屏幕在当时最流行的尺寸是640x480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑，当时的大部分网页也是用Flash或HTML创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路，CSS已得到长足的发展，“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history

///

它现在怎么样-响应式设计

随着CSS3的发布，我们获得了对“媒体查询”（Media Queries）的访问权限（译者注：随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries，即“媒体查询”），此后不久，Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来，我们一直使用“响应式网页设计” (RWD) 创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

在早期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了非常流行的方法，当时有很多CSS完全不受支持。

用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用“媒体查询”来更改整个页面布局。

///

它的未来是什么-组件驱动

很快，使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。

我们通过基于viewport（视口）的“媒体查询”获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为“媒体查询”是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力，也缺乏将“响应式”样式注入“组件”本身的能力。

当我们谈到组件时，这里指的是页面上的“元素”，这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information（全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时，这使得它变得更加困难。

好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS正在不断发展，“响应式”网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计” (RWD) 以来，仅仅10多年的时间，这个生态系统已经准备好迎接CSS发生一些相当大的改变。

让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。

///

用户能够设置基于个人偏好的“媒体查询”

简单来说，我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的“媒体查询”可能包括：

这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。更进一步说，这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子，当用户的操作系统偏好设定为“减少动效”时，他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好，并为其他人提供“动效增强”的体验。

另一个流行的媒体查询是@prefers-color-scheme（配色偏好设定），它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”，它会自动发生。

///

“容器查询”为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是“容器查询”（container queries），通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估，尽管今天使用它并不安全，但重要的是要了解其发展方向。

简而言之，“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立，与现代设计系统保持一致，真正成为“即插即用”模块，可以转移到任何页面或布局，而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法，因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要，我们应该研究一下。

///

考虑各种形态因素

由于各种“形态因素”（form factors）的变化和扩展，例如新的屏幕类型，可折叠屏，我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中，请记住，这是最具实验性的，并且只是一项正在进行的工作，仍在尝试解决我们可能遇到的任何复杂问题，同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中，原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如，你可以在一个屏幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个屏幕上展开并随页面滚动。

///

为什么我们需要它？

我知道你在想什么，我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意，那么为什么要改变呢？如果我们真的以终局视角来看响应式设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页，诸如“容器查询”之类的工具将变得非常有意义。

配图：CSS 将基于各个层级来确定用户的最佳体验

考虑到这一点，这意味着我们现在可以使用基于页面的媒体查（包括跨越屏幕的细微差别）来设计宏观布局；使用容器查询的组件设计微观布局；使用基于用户偏好的媒体查询，根据用户独特的偏好和需求定制用户体验。

对于新的响应式设计，有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实：即我们的设计不是静态的，不仅在布局上，还有在用户可获得的体验中，我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解“新响应式”体验的意义。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

向世界知名的设计师致敬系列之二：乔纳森·伊夫,马克·纽森

向世界知名的设计师致敬系列之一: 雷蒙德·罗维,约恩·伍重,菲利普·斯达克,荣久庵宪司,亚历克斯, 亚历克斯·塞缪尔森

01表单概念

表单页作为基础通用组件，也是B端产品中台、后台出现比较频繁的页面之一。看似简单的页面我们在设计时却有很多值得推敲的点，在细节处提升用户易用度，我通过日常的学习和公司项目，在这里总结复盘了自己的经验。

表单的适用场景比较广泛，常见的基础表单比如登录注册页面，这一类往往信息简单，格式比较固定，除此之外就是分步表单、高级表单。常见的场景主要用于新建信息、申请、客户信息、商品信息等等。这类表单可能存在复杂逻辑关系和功能，有时会给我们造成困扰。以下我将以这一类表单为主要案例，一一进行拆解。

登录注册页：表单内容简单，操作简单。

分步表单：具有流程化特点，具有先后逻辑关系，内容较多的业务类型，比如转账，新建商品订单等。分步填写可以减缓用户压力，起到安抚用户情绪的作用。

高级表单：主要用于需要一次性输入、提交 大批量数据的场景。也成为分组表单，和分布表单一样都是为了减轻用户填写压力。

02设计原则

首先我们需要明确表单页的主要功能：表单页承载了系统中绝大多数系统数据的录入、增删、修改、查看，是系统中人机交互最为频繁和典型的数据媒介。表单页通常需要用户录入大量的信息或数据，在设计时我们的核心目标应该是让用户明确当前表单页面要完成什么任务，轻松理解项目含义及生效的结果，思考如何帮助用户高效、准确、轻松的完成任务。

表单设计基本原则：明确、高效、安全

明确：用户可以快速定位重要信息和目标选项，表单文案和组件可以准确传达任务含义

高效：易理解易操作的交互方式，尽量减少交互步骤，减少用户任务路径步长，配合合理的信息布局引导，准确的选择合适的组件传达信息，帮助用户高效的完成任务。

安全感：操作前有效的防错机制，操作中有明确的状态反馈与容错，允许纠正错误。操作后及时的保存，取消机制。

03表单构成

一个完整的表单通常包括表单标题、表单标签、表单域、提示信息、占位符、操作按钮几部分。

标题：起到说明表单模块的作用，是用户快速明确任务和定位页面位置的重要标识。

表单标签：内容项的名称，说明对应填写项含义及说明用户该填入什么信息。

表单域：表单的核心操作区域，用户操作最频繁，最集中的地方，这里的可选择组件样式也会根据内容需要而变化，类型最为丰富多样。需要注意的是同一类型的组件需保持一致性原则。

占位符：一般出现在用户未填写内容时，用于辅助提示用户录入线索。

提示信息：辅助提示用户的作用。分为普通提示和错误提示，也是很好的防错纠错机制体验。

操作按钮：“结束”表单任务的触发器，用于向服务器提交数据或者放弃操作。

表单标签

表单标签样式常见的有4种，左对齐标签、右对齐标签、顶部标签和行内标签，不同的对齐方式各有优势和缺点，适应在不同的场景。

右对齐标签（冒号对齐）

优点：标签指向明确，操作效率高，节约纵向空间

缺点：可读性低，不适用于狭长空间或需要适配多语言的页面

场景：普通表单填写，多用于web端

左对齐标签

优点：阅读性高，节约纵向空间

缺点：不适用于狭长空间或需要多语言适配的页面，操作效率低

场景：详情陈列

顶部标签

优点：视觉对齐舒适，节约横向空间

缺点：纵向空间利用不高

场景：多用于移动端表单填写，多语言适配页面

行内标签

优点：视觉对齐和空间最节约的方式

缺点：当用户输入状态时，标签消失，增加用户记忆负担

场景：多用于登录注册，修改密码等内容极少，不需要记忆的页面

表单域

表单域是一个表单页面的主体部分，其内容丰富多样，从而它可选择形式也最多，不同的内容我们在设计的时候应该选择最合适的组件，以及应该注意同类型内容选择统一的组件进行设计。

定义操作框大小

在实际项目中我们往往会遇到内容长度不能统一的时候，那怎么这种情况该怎么处理呢？

以往我的处理方式是强行拉长对齐，但我们可以发现强行对齐的时候，视觉没有得到很大优化，反而在隐喻传达给用户错误的信息，当用户在操作1功能的时候，可能会错误的认为这个选项可以选择很多，因为我们给的选择框很长，而实际上它只能选一个。这样就会给用户造成不必要的理解成本。

比较好的方式处理方式是我们设计组件库时就设定不同尺寸的操作框，来适应不同场景下不同内容需求。如果不能对齐，那就让它参差不齐。

提示信息

提示信息在表单中起到提示、纠错的作用。形式主要有以下几种：行内占位符提示、操作框下方文字提示、tost提示、气泡提示。

行内占位符：这是一种基础应用，它即可用于占位，也可用于任务说明提示，当我们说明文字很少的时候可选择的一种方式。需要注意的是内容务必简洁易懂，减少阅读成本，不要说“正确的废话”，语句应该是完整的陈述句。

气泡提示：当提示文字很多，主要用于对标签的名字释义时，气泡弹窗是个不错的选择。它的优势在于可以将更多内容折叠，不占用空间，缺点是不直观，增加了用户操作步骤。

Tost提示：Tost提示一般是在出发操作按钮后给出的提示，可以是操作结果提示，也可以是内容填写提示。

操作框下方文字提示：当提示内容很多时，还可以考虑操作框下方提示，多用于对输入内容的辅助说明场景。应用场景包括以下几种：

组件组合后在表现层的设计

提示信息在页面中还是一个辅助性的角色，常规情况下的视觉层级应该是 表单内容>表单标签>提示信息。当用户有错误操作时“错误提示”优先级是最高的，我们一般用带有警示性的颜色给以醒目显示。

为了使用户更好的辨别任务项，需要注意组件与组件、组件与说明文字之间的间距差别。

04交互方式

表单中的交互方式根据其内容选择对应最合适的形式，内容简单而少的可以直接在原位编辑，操作快捷，关联性最强，所见即所得，内容容量低于5个。其次内容较多的，或者针对全局操作的可以选择气泡卡片，比如全局设置等。第三种是弹窗或者抽屉，两者形式是一致的，区别在于对内容的承载量上，弹窗容量较小，内容较多的情况下抽屉式弹窗（侧拉弹窗）是更好的选择。最后，内容承载最大的就是页面跳转，同时这种方式与原页面的关联性最弱。

组件构成表单，实际项目中，我们的表单往往内容会多而复杂，设计时可以考虑在布局上优化去提升使用体验。

常用的方式有几种：信息分组、锚点定位、标签页、分步骤。

在格式塔邻近性原则中提到，人们将彼此接近的事物、元素，倾向于认为它们是相关的。在设计中很早就运用到这种认识倾向。所以我们在信息分组时可以运用设计手法将相关信息从视觉上区分开，提升信息阅读有效率。

分组方式：

1.简单的内容使用标题分组或卡片分组就可以达到目的。

2.而内容很多，组别之间没有关联性时用标签分组。

3.页面内容很长需要连续下滑操作时，锚点定位就可以提供便捷的操作体验。

4.在任务有先后逻辑关系时，分步骤是最好的选择。

标签分组与锚点定位在表现形式上类似，区别点在于操作后的结果。标签分组切换标签后页面数据会刷新，一般没有自动保存功能，锚点定位则是每次点击定位页面不刷新数据，始终保持在同一数据页面。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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