每个人都有自己的思考，只是有些时候不愿思考。我认为主要有以下几个原因：

1、个人定位错误

B端业务脱离了设计师的生活场景，设计师很难有代入感。日常工作中，主要依靠产品经理的输入。而视觉出身的设计师通常比较感性，不太愿意去了解复杂的业务场景，不想参加需求评审。对于需求内容，设计师容易全盘接受，甘愿只做一名“真正”的设计师。

设计师不愿意被称为“美工”，但是现实中，一些B端设计师就是“美工”的角色。产品经理给了原型方案，设计师按照设计规范润色一下，完成页面搭建就可以了。当你问他为什么这么设计时，要么说“原型就是这样的”，要么说“为了好看”，就是没有自己的思考。

另外新人设计师缺乏思考，就容易盲从。当年我在设计实习时，就是如此。一方面个人的设计能力比较弱，另一方面缺乏思考，找不到破解途径。更多的是依靠其他人的输入，加上缺少自信，更容易听信别人的想法。当时做了一些事情，但似乎又没做什么，导致个人的成长非常缓慢，甚至会形成恶性循环，给自己也造成了很大的精神压力。

久而久之，设计师的存在感就会越来越弱，也会对个人信心造成比较严重的伤害。

2、成就感低

B端产品的页面设计很多都是流程、数据，设计师主要跟表格，表单打交道。做来做去，没什么新鲜东西。时间长了，设计师容易失去工作热情。特别是企业内部的B端中后台管理系统，用户量不大，各方面的关注度不高，用户体验似乎可有可无，设计师就会产生思考惰性，“就这样吧～”成为了主流的想法。

另外设计师如果只关注交互和视觉、受限在设计规范的框架中，设计方案就会流于形式。而产品经理基于业务需求出发，设计方案也很容易被推翻，一遍遍改稿成为家常便饭。如果产品经理还懂点交互，那么在他眼中，设计师对产品就没有多大的帮助，顶多只是帮忙把原型图画的规整了一点。

3、团队氛围差

很多B端产品对设计工作不够重视，不会专门设置设计团队，所以设计师的地位并不高，加之设计流程不规范，产品经理有时会直接扔一个原型方案过来，让设计师照图做设计，连个基本的设计输入也没有。有些产品经理的配合意愿差，设计师主动沟通时，还会遭到奚落或者刁难。

经验不足的设计师碰到这种情况，一时难以找不到解决方法，就容易自我封闭，索性就放弃努力，完全遵照原型执行。毕竟“原型即需求，需求是产品经理的职责，我是遵照需求设计的，完全没问题”。一旦有问题，设计师也有借口搪塞过去。

4、经验主义作祟

经验很重要，可以让设计师从容地面对各种需求。不过有时候经验主义会让设计师想当然地去理解需求，导致设计师犯错。每一个需求看似相同，但是深究下来，用户和场景可能已经发生了变化，原有的设计形式不再适用了。

竞品分析可以帮助我们获得别人的设计经验，不过这种设计经验也不一定牢靠。竞品虽然是相关性较强的产品，但是产品的定位、市场状况、用户和场景还是有所差别的，所以完全照搬竞品也并不是最优的选择。

当我们研究竞品时，最重要的是剖析竞品为什么会这么设计，而不是只看竞品是怎么设计的。

二、设计师该如思考呢？

思考的方法有很多。孔夫子曾说过“学而不思则罔，思而不学则怠”。把思考和学习的辩证关系说得很透彻了。

1、思考的深度

“学而不思则罔”，意思是说只学习不思考，就不会很深刻地理解知识的内涵。

当我们接到需求时，产品经理有时候会直接指定一个竞品，建议设计师直接照搬设计内容。对于设计师而言，这样做设计肯定比较简单。但是对于设计师的成长没有太大意义。设计师应该深入思考，理解产品背后的设计原因。这样才能将别人的经验为自己所用。

另外当我们接到需求时，不要立马动手开始画图，应该先要了解需求的目标、需求的用户场景，对需求进行一番梳理，并与产品经理沟通，消除其中的疑问点后，再着手开始设计。

通过不断地深入思考，设计师就能够积累出自己的设计方法论，也可以帮助设计师快速成长。

2、思考的广度

其实狭义的用户体验设计领域并不宽，应该说是比较窄的。设计师局限在自己的专业领域，很难获得持续的成长。而在工作流程上，设计师的需求来自产品经理，如果只依赖产品经理的输入，设计师在工作上必然会非常被动。

设计师想要获得足够的话语权，必须要提高思考的广度。

1）站在用户角度思考

设计师成长初期，注意力更多的是做好产品需求，完成设计方案。这个阶段最大的问题就是“重设计、轻业务”。设计的出发点局限在设计本身，“视觉只追求好看，交互只关注控件或者操作逻辑”。

我刚入行时就是这样，来了需求就做，不会问需求的价值，不去思考用户关注什么，用户场景是什么，主要就是为了完成设计任务。工作精力只是停留在与产品开发讨论控件形式，操作方式、操作流程点击次数等。

实际上设计师应该要了解用户场景，并代入其中，才能真正的发现用户痛点，才能做出更好的解决方案。

2）站在产品角度思考

界面设计是为产品服务的，必然也要满足产品的目标。设计方案只是片面地为用户体验服务也是不可取的。在一些B端产品中，用户体验并不是最重要的核心竞争力，所以用户体验需要服从整个产品的规划，在特定场景下就是要与产品相互妥协，逐级迭代，不能只追求极致的用户体验。

另一方面设计师还要深入了解业务，从设计角度帮助业务提升。比如某个业务场景下，需要给用户提供一些数据指标，为下一步操作提供依据。产品经理或许只是给出一张数据表格。

而设计师则要思考如何进行有效的信息传递，让用户清晰地理解数据逻辑。最终给出的答案可能是，在数据表格基础上，利用数据可视化方式展示数据之间的对比关系，便于用户做出判断。

3）站在设计师角度思考

很多时候界面设计比较主观，每个用户的喜好、感受可能会大相径庭。所以设计师抱怨最多的就是“没有话语权”。领导今天要绿色、明天要红色，仿佛设计永远在变动。最终千辛万苦确定下来的方案，领导一句话可能又要调整。这对设计师而言，绝对是沉重的打击。

设计师除了完成设计方案，还要思考如何将一个“主观”的设计方案，“客观”地表达出来，要让相关人员知晓设计的思考过程，让设计方案变得有理有据，并影响相关人员，获得最终的认可。

一旦设计师思考总结，形成了适合自己的方法后，设计师或许就自然而然地拥有了“话语权”。

总结

设计师的成长应该是个老生常谈的话题，思考能力是必不可少的能力之一。

“思而不学则怠”。有些设计师或许并不是不思考，而是深陷困境，找不到出路。思考过后，还需要去学习提升，去主动与他人沟通，寻找解决方案。或许这样才能打通自己的成长之路。

作者：子牧先生

转载请注明：学UI网》设计师的能力建设（2）:思考能力

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

但随着大屏手机的出现、逐渐追求个性化、高效率的操作等原因，使得不少人开始习惯用“抠边返回”的方式返回上一页：按住屏幕左侧边缘并拖动。

无需特意将手指移动到特定的左上角位置、再点击back图标，随意在屏幕左侧边缘按住并拖拽 即可返回上一页，方便又快捷。

而且现在越来越多的手势，赋予了用户更多的操作自由与使用效率，也让互联网产品的生命力进一步得到了强化，给每个产品的功能体验带来了更大的发挥空间。

下面带大家欣赏一下，各个手势里好玩、优秀的互联网设计案例。

一、双指捏合

1、捏一捏就能抱抱？

之前网易（抑）云上线了一个很暖心的交互，在某条歌曲评论上用双指捏一下，就会弹出一个“抱抱”的动画，写下这条评论的用户就能收到一个“抱抱”。

够给那些生拥有悲观情绪（特别是抑郁症）的人求得心灵寄托，带来一些温暖、安慰，表达用户情绪，也降低产品不良风评（网抑云）。

亮点在于：运用「环境贴切」原则，双指捏合的手势动作联想到了现实里的「抱一抱」动作，更符合/表达出抱一抱的情感关怀和暖心情绪。

观点总结：产品不应该是冷冰冰的，应该给用户探索更多的乐趣和温度，通过「用户关怀」助力产品口碑与印象的提升。

2、捏一捏就能伸缩？

iOS的相册图片，可以使用双指捏合or分离 即可对图片进行放大、缩小浏览，快速查看图片细节。

免去用户「需要点击图片后，再去缩放」的操作链路，大大减少操作路径。但该交互更多符合国外操作习惯，国内还是习惯采用【点击后再放大】方式放大图片。

亮点在于：用同一个模块兼容多种交互/内容，免去用户「需要点击图片后，再去缩放」的操作链路

要点总结：可思考用一定的快捷操作来满足不同水平的用户需求，允许用户定制常用功能，比如【快捷键、重新操作、默认值等】

二、摇一摇

1、摇一摇就能加载内容？

爱奇艺在启动页上的信息展示上做了创新：只需“摇一摇”即可进入对应的广告详情和影视剧播放页，抛离传统的“点击”模式

亮点在于：利用新鲜玩法来吸引更多用户观看广告、影视综视频，减少对启动页内容的抵触情绪与用户流失

要点总结：学会用趣味性交互 / 新的设计手法吸引用户目光，利用新鲜感的驱使引导用户参与，减少流失

2、摇一摇才能拍照出片？

喵喵记账有个设计挺有意思的，按下相机拍照后，需要晃动手机来使相片成像，才能看到影像慢慢显现。

通过连接现实生活感受，使成像过程具备仪式感与趣味性。

亮点在于：不仅只在视觉上进行拟物化，更注重与现实中类似的交互操作，使之更具真实感。

要点总结：系统的一切表现和表述，应该尽可能贴近用户所在的环境，比如【用户语言、使用习惯、手势操作、生活联想/隐喻等】

三、拖拽

1、一拖就能发送照片？

QQ里的图片发送很有意思，只要按住想要发送的图片并往上拖动，松手即可发送。不用像传统的’先选中图片，再点击发送按钮’，特别方便

对于发送单张图片来说，免去了常规的跳转页面调取相册的多余步骤，大大提升操作成本

亮点在于：利用手指的黄金操作热区，赋予更加快速、便捷的操作方式，大大减少行为负荷

要点总结：对用户重要、常用的功能可以设置「快捷操作」，提升操作效率

2、头像还能拖出来玩的？

在即刻的个人主页里，可以随意地拖拽、甩动自己的头像。松手后头像会根据惯性回到原处。期间还带着残影、原来的头像位置会显示一个小红心。

亮点在于：利用头像降低了个人中心带来’冷冰冰’的感觉，丰富产品的可玩性与互动性

要点总结：设计有趣的隐藏彩蛋，能给用户带来惊喜并有效拉进之间的距离

四、双击

· 哪里需要点哪里？

早期在抖音上看视频时，点击或长按屏幕上的任何位置都会显示【爱心图标】与【操作浮层】。

大大减少用户的操作成本（手指与目光的移动），突显产品的个性化服务。

2、双击就能控制弹幕？

B站作为国内「视频弹幕」的始发者，它的用户喜爱程度与操作频率也是极高的。因此只要两个手指双击屏幕，就能快速开启或关闭弹幕。

用户可随时随地开启或关闭弹幕，无需特意找到右下角的固定入口进行操作，大大减少操作成本。

亮点在于：免去用户需要点击特定区域的操作负荷，增加产品操作的舒适与自由度

要点总结：系统状态可见性：让用户知道【自己在做什么、处在系统的什么位置等】，并做出适当的反馈

五、滑动

1、用标尺来控制数值？

Florence里的标尺设计得很有意思，通过第一人称下的镜头视角，让用户感知当前标尺所对应的人物清晰程度，以此来控制标尺位置。

避免用户掌握、控制不了合适标尺的位置，提升选择效率

亮点在于：提供参照物可让用户有直观的决策依据，减少操作成本

要点总结：任何让用户更改/选择的地方，都应该明确地传达出预览效果

2、用拖拽来控制人物动作？

Florence是一款‘模拟叙事’小游戏，里面很多的交互动作都模拟了真实生活：

比如【刷牙】，需要左右滑动屏幕来模仿真实的刷牙动作；再如【做饭】也需要滑动平底锅来模仿炒菜动作。

亮点在于：利用交互动作来推动情节的发展，让玩家有真实的代入感，提升游戏的趣味性。

要点总结：模拟真实生活/环境的设计，能有效提升用户的理解能力、产品趣味性

当然还有iOS微信上的‘删除确认’，在原有的内容基础上表达对用户的二次确认，避免用户手误造成操作失误，减少不必要的损失发生

六、隔空手势

华为Mate30pro 有个「隔空手势」的交互，可以在距离屏幕20cm-40cm内进行手势操作，如隔空翻页、上下滑动、隔空截屏等。

提升手机的使用体验与操作效率，特别是边吃东西 边玩手机（追剧看小说等）

还有优酷HD上线了一个黑科技交互【隔空手势】，可隔着屏幕用手势做各种操作

如「播放/暂停、全屏/半屏、快进/退15秒、亮度调节、音量调节」等操作，让用户不点触摸屏幕就能操作视频。

亮点在于：让用户解放双手，无需手指触摸到屏幕即可控制手机，可减少很多卫生问题与操作成本。

要点总结：学会利用新技术来满足更多、高层次的用户诉求，通过一定的设计方式来满足不同水平的用户需求。

– END

最后，再酷炫再方便的手势，最多也只是锦上添花、起方便快捷的作用而已，不可能完全替代‘点击’的位置与作用。

正如正文所说：手势交互只适合用对业务重要、用户常用的场景中，可以起到四两拨千斤的，切记不可为了酷炫而随便添加。

以上老和对【手势操作】的一些小总结，觉得认同的麻烦帮我【点赞/在看/收藏/转发】，写得不对的请轻点喷~

作者：和出此严

转载请注明：学UI网》有没有发现，‘点击 ’开始变少而各种手势越来越多了？

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

既然粗暴、接地气的设计容易被人说成“土”，那么使用一种当下比较流行，或者比较有特色的风格，就能有效增加画面的设计感和时尚感。

▲ 上图使用高饱和度的蓝色和绿色组合搭配，以及文字以背景的方式环绕在产品的周围，都是近几年比较流行的设计手法。

▲ 上图使用扁平效果的描边色块来进行排版，既能突出文字信息、视觉效果也很时尚。

▲ 把高饱和度对比色、扁平风、几何图形、文叠图等一些常在艺术海报中使用的技巧，用到促销海报中来，这种接地气的设计是不是也变得高级了很多?

▲ 用波普风格设计促销海报，效果也是很亮眼的。

二、把文字图形化

有很多海报设计需求是以文字为主的，客户也并没有提供配图，如果只展示文字，效果很容易单调，这时就可以尝试提取文字中的关键词，设计一个图形符号与文字信息进行巧妙组合，文字与图形符号共同组合成视觉主体。

这么做既可以增加画面的美观性、视觉冲击力、形式感，同时文字的面积占比也不会被大面积压缩，保证信息的清晰易读。

▲ 把文字与光线组合在一起，既突出了文字、也加强了画面的视觉冲击和美观性，同时，电子产品的品类调性也得到了体现。

▲ 上图把文字与汉堡图形组合成一个主视觉图形，加强了画面的形式感。

▲ 上图把文字与打板器组合成主视觉图形，打破了纯文字的单调感。

▲ 上图把文字和图片放在一个外卖袋里，加强了设计的带入感和产品属性。

三、把文字场景化

其实这也是文字图形化的一种形式，只不过不是把文字与具像的图形符号结合，而是把通过把文字进行扭曲、变形、添加元素等方式，使其具备抽象的场景特征。

▲ 该海报把主要信息组扭曲成墙面和地面的效果，创造出一个立体空间。

▲ 这件作品与上图的设计手法有点类似，也不知道是谁借鉴的谁。

▲ 上图把“敢为先”这个几个字拉大，布满月球后面的整个天空背景，就好似一扇巨大的城门。

四、图文组合

即把图片与主要文字组合在一起，共同形成画面的主视觉，而不是相互独立，把文字当成图片的配文，常用的图文组合方式有图叠文、文叠图、图文交叉等。

图文组合的设计方式可以加强图文之间的联系和对比关系，使画面更整体、更聚焦。

五、加入人物或动物插画

如果版面中只有文字，或者只有文字和产品图片，那么版面都容易显得无趣、缺少细节，在画面中加入人物和动物而可以增强代入感和亲切感，不过这类实物素材都有版权，而且比较常规，而改成插画素材就可以有效解决这一问题。另外，最好要让这些插画元素与文字或产品发生互动。

▲ 上图加了一个卡通的厨师以后，除了画面更生动、更有趣，也会给人一种值得信赖的感觉。

▲ 上图的排版和形式其实比较普通，但配上搞怪的插画后，海报变得有趣了许多。

▲ 版面上方的熊猫加强了海报的吸引力和趣味性。

六、精致的排版和配色

下面的这些促销海报并没有特别的风格、巧妙的创意，也没有新意的设计形式，只是通过精致的排版和漂亮的配色，把大量的文字和图片素材合理地编排在一起，效果照样不错。

▲ 信息虽然很多，但是层级分明、清晰阅读，大量使用色块进行排版，而且在编排上有很多细节的变化，颜色为类比色组合。

▲ 图片和配色很有食欲，文字排版简单、清晰，但又通过不同的色彩、字体、字号、修饰手法将不同信息进行鲜明的层级区分，文字与图片有关联但互不干扰。

▲ 外边框的处理以及版面中的圆点底纹使版面显得更精致、更有设计感，版面虽然排得很满，但是主次分明、信息清晰易读，三组食物所搭配的文字虽然不大，但是细节满满、井然有序。

▲ 大量的手写字体给人一种“纯手工制作”的感觉，与朴实无华的产品形成呼应，文字全部集中排在版面的上方和下方，而中间区域完全留给了产品图片，视觉对比鲜明。

抛开客户的需求以及效果谈设计的美观性就是耍流氓，把文字缩小、加一些没什么意义的英文、使用一些酷炫的排版技巧，可能会让你的设计更精致、更洋气，但如果抛弃了客户的需求和消费者真正关心的东西，那么我们并没有真正解决问题，如果客户要大、要多，那么我们就争取给他一个又大、又多、又好看的方案。

作者：葱爷

转载请注明：学UI网》客户：要多、要大、要好看，能安排不?

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

历史长廊

在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。

在当时，大多指的就是宽度自适应布局。在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。

在当时，大家都还没有响应式布局的概念，但此时出现了一个新的词–渐进增强。渐进增强出现后，另一个词优雅降级也随之出现了。这里只是举个典型的例子：gmail和qqmail。这两个都是百分比宽度布局，都属于自适应布局，但有区别。

qqmail就是css hack的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。gmail则使用了渐进增强，你的浏览器越新越强，你看到的效果就越好，为的是用户体验增强。再后来，Google发布了Android，移动互联网爆发，html5标准发布。

互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能，用户要求不断提高，网站更加看重的是用户体验了，所以，谷歌式的渐进增强被广泛认可，结合自适应的思想，出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

现如今，为何需要考虑多设备的兼顾呢，依然是因为时代发展与生活方式的变迁：

• 即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
• 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
• 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。结合自身产品用户访问浏览器分辨率
• 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。

布局方式对比

静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下：

静态式布局：

窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。

自适应布局：

用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。

分别为不同的屏幕分辨率设备设计不同的样式布局，相当于多个静态布局组成的一个系列合集，每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小，当可视窗口改变时，不会出现横向滚动条，UI，图片，文字会自动缩放，元素内容、布局、交互方式基本不变。

弹性布局：

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

流体式布局：

属于自适应的一个子集，也是通过百分比自动适配设备屏幕分辨率和可视窗口大小，不同于百分比自适应的是随着窗口大小的改变，页面的布局会发生小的变化，可以进行适配调整，这个正好与自适应相补。

响应式布局：

如果从广义上讲，响应式布局实际上就是更好、更机智、更灵活的去实现自适应，他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性（如宽高）的变化。

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和删格、布局、图片、css media query的使用等。

狭义上讲，响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

A+R混合模型布局

• R和A上的区别

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。

他们之间主要的区别是DOM结构，当采用响应式思维开发时，HTML代码在各种情况下都会一样（除非你用JS移除某些DOM节点），而在自适应开发中我们可能会有不一样的代码结构和体验。

R采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过fluid grid），直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始（通常采用mobile first策略），所以旧的网站要做RWD很可能要完全重建。

A只在针对几种分辨率（如320，480，760，960，1200，1600px）进行优化，在断点之间的自动过渡比较少。A采用保留现有桌面网站（desktop version）而对于更小的分辨率做针对性的优化（适应），减小重构的成本。

两种设计思维都是有效的，需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。

两种方法各有利弊，但是如果同时使用它们到底会得到什么呢？

• A+R模型结合了基于单个主要临界点的自适应和响应式方法。

混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。

自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。

否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。

选型

如何考虑实践过程中的判断呢。一是看应用场景，二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。

但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上，识别UA，渲染不同版本的模板，组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。

当各个版本间的差异很大时，维护成本很可能会大到无法接受。即便分开做，架构上也要调整，后端服务化，应用层app化。

根据不同公司的技术特点，调整的成本也难讲是否可行。对于大型站，分开做更清晰，同时用响应式组件解决复用、功能同步的问题。总之，根据场景响应式可以从各种层面，各种粒度上做。这是现代web开发的特点。

建议开发一套响应式电脑网站（过渡到平板端，不过渡到手机端）和开发一套响应式手机端网站（过渡到平板端以下的尺寸，不过渡到平板端）

响应式布局有可能造成冗余的代码较多，对研发的要求也更高，比如如何更好地让图片，适配，UI动画自适应各种布局。

大站还是要考虑数据计算和承载的问题，会对桌面和移动端输出不同数据，减轻压力。

实践与技巧

首先，我们需要了解几种分辨率的差别。

ps：原生应用可查询横纵两个方向的像素密度，通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率

以一个SaaS类后台产品为例，对于基本流量来自Web端网页的产品而言，需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况，数据来源百度统计，如图所示：

如上所述，选择适配方式时，设计目标为：区分web与pad端可共享的设计布局大于手机端，且产品规划上web端为主流量来源，pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡，于是判断需要选择A+R模式来完成产品的跨端设计。

自适应（A）方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：

• 左侧的可视区代表整个屏幕小于960px时的具体布局和内容
• 右侧的可视区代表整个屏幕大于等于960px时的另一种布局

在使用响应式（R）技术时，我们可以利用主要临界点创建两个互不相同的体验情景，每种体验里，我们都可以在可用空间内定义二级临界点去调整布局。

通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。

这种设计方法要求设计师真正了解他们想要提供的体验，以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的，你的产品将具有很强的灵活性，但同时也很复杂。

因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。

其他辅助手段

删格

栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言，这是一项十分有效的辅助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于对齐内容。其中的槽（Gutter）是指相邻列之间的空间，把控页面留白,有助于分隔内容。

2. 页面边距（Side Margins）

页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值，这些值决定了每个屏幕尺寸的最小呼吸空间。

3. 用于组成栅格的列数称为列结构。

8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分，将内容排列在4-4-4或3-3-3-3大小的文本框中，也有部分设计系统采用来24列的形式，如Ant-D

4. 断点

是指屏幕尺寸的特定范围，列结构、列宽、槽宽和边距都取决于断点。在这个范围内，布局会根据可用的屏幕尺寸重新调整，以获得最佳的布局视图。

如果较小的屏幕有足够的可用空间容纳内容，则列将按比例缩小。如果一列的内容无法在较小屏幕上显示，该列将垂直放置图文内容。

5. 网格规则

列跟槽的宽度是以网格作为基本单位来做增减，所以应该先定义好栅格的原子单位，“网红款”8点网格指的是设计页面时，也应该遵循8点规律。值得注意的是，列跟槽的值尽量取8的倍数，但不是非得是8的倍数。

产品中各类元素应该遵循这个倍数原则（图标、组件大小等），不同的设计系统根据自身需求，设定这个规则。例如在Material Design中使用的是2X网格。

6. 流体栅格与混合删格

流体栅格有不同宽度的列，固定的槽和固定的边距。流体栅格有灵活的内容宽度，根据屏幕大小变化在流体栅格中，列可以增长或收缩以适应可用空间。

混合栅格既有不同的宽度，也有固定宽度。在现代布局中，一些元素超出了网格边缘，与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。

如果内容宽度大于可用的屏幕尺寸，那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格，以充分适应内容。

结语

设计需在技术方案前介入，根据你的产品特点，进行设计方案评估，可借助的手段有删格，网格规则等，设计断点规则时，需关注设备的常见系统分辨率。

移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。

但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计或者使用A+R的模型，在寻求合适的过程中，关注技术的革新。

A与B不是硬币的正反面，它们为了解决同一个问题而生，是同一种思想的延伸。

作者：神乐

配图：沙拉

转载请注明：学UI网》Web产品的适配设计选型

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

这是一个科技类网页的小插图，这样看是OK的，但第一版的图就一言难尽了，如下：

做完设计之后，我往回看看了，发现第一稿真让人头皮发麻呀～
最后的呈现效果比之前做的都要强太多了。

不管是颜色方向、质感、细节上都甩前者一大截，原因是什么呢？我总结了以下几点：

一、层次关系

客户就说“画面视觉太平了，没有层次，黑白灰关系没有拉开！细节也没有！颜色不好看！自己回去再想想吧！”……

黑白灰关系什么意思呢？我的理解就是先把设计稿去色不就能看到黑白灰了吗？

很多同学在做设计时不会考虑黑白灰这个问题，但其实颜色也是有变化的；在颜色中黑白灰的关系就是色彩的明度关系，明度越高就越白。
正常情况下画面中的黑白灰关系拉得越开，就越有空间感、层次感。

如果画面中黑白灰关系没有拉开，就会使画面飘飘的，很奇怪、不接地气。

如上图就是一个正常的黑白灰关系，每一层都区分的很开，它就会有空间层次感。

而且我们也需要保持画面的平衡感，黑色多了就会使得画面沉，白色多了就会使画面飘，灰色多了就会使画面闷。

所以我们得把握一个度，把握黑白灰在画面中的节奏感！

我们再把黑白灰关系运用到实际工作中：

整个背景采用暗灰色调，主体底板用亮灰色，内容就用亮色系，阴影及厚度用暗色调。这样一来画面的层次拉开了。

那么客户说的细节该怎么去加呢？

二、细节

没有细节、太平了，我就想到把它做成立体的感觉，让画面丰富起来，也可以加一些点缀的小元素来修饰画面。

从平面二维到立体三维画面的细节就丰富多了,而且三维空间更加容易出效果。

在加细节的过程中，我感觉到了画面中有点太过于规规矩矩了，全是方方正正形状，就很呆板的感觉，特别是左下角的矩形框，与整个画面之间没有联系、不协调。

这就是构图出了问题。

解决的方法很简单，只要让图形与图形之间互相穿插、叠加，让它们你中有我我中中有你；甚至可以把图形加以旋转，让图形产生“正”与“斜”的对比。

这种方法就可以解决画面死板的问题。

但是我觉得不能够加矩形了，画面中方形形状已经很多了，那么我们是不是可以考虑一下用圆去增加画面节奏感。

方的对比是圆，也是一个对比关系，但圆的占比面积太大了，咱们就可以用弧线去代替。

这不，弧线把方正的矩形打破了，画面就更加生动有节奏。

还有一个细节：

如图所示，这里就涉及到一个识别度的问题，我们在做设计的时候，一定要把形体交代清楚；

我做了一个银币的效果，但是形体边缘轮廓没有交代清楚，整个银币糊在一堆了，看不清里面的字符是什么，这样的感觉不是很好，整个元素是虚的。

还有上升的线条取消发光效果是不是去掉会更好呢？

这样是不是画面会更加的完整呢，这点很重要呀，我们得把物体交代清楚，不能模棱两可就糊弄过去了！物体虚虚的给人感觉很飘，不稳。

其实还有中间的一稿，但是颜色一不小心就弄脏了：

三、颜色脏的小技巧

经过尝试，我总算明白为什么颜色渐变会偏脏了；我总结了以下几点：

1、饱和度低的颜色占比不要太多，多了颜色就容易显得脏。

如图，右边的颜色饱和度偏低，这类颜色就会发灰，灰色多了能不脏吗？

2、尽量不要用对比色去拉渐变，对比色渐变对于新手来说不太友好，“红配绿赛狗屁”就是这种说法。

只要注意到这两点就基本可以避开颜色太脏的情况

总结

以上就是这次小案例带给我的启发和思考，希望当遇到类似我这种问题的时候能够给你点启发，能够帮助到你！

怎么样，是不是很耐思~有没有想动笔的冲动！那接下来把话筒交给青灯，让他开始他的表演吧！

YoYo，大家好！我是最近画到手痛的青灯，这次是我第一次做插画教程，做的不够好的地方就请大家多多指教啦！

这期的彩铅颗粒风格主要是用扁平人物和元素+方型构图+彩铅肌理刻画的结合。

构图灵感来源自法国艺术家 Gasp art 的插画作品，这个系列作品以扁平人物为主，用演奏乐器的方式结合了植物的生长，可以很直观的感受到每个人物的动作和元素都是框在一个正方形里，给人一种规整又舒适的感觉。

艺术家 Gasp art 的插画作品，仅供赏析

总结一下 Gasp art 的插画构图，其实主要就是人物加元素组成方型构图，可以用植物和道具元素或者是人物动作弯折的形式构成方形边框。

这次的刻画方式我们选择了两种风格：一种是偏粗糙的铅笔肌理风格，第二种是偏柔和的细腻噪点风格，让我们来欣赏一下图片：

艺术家 Nadiia Zhelieznova 的插画作品，仅供赏析

艺术家 Wnjing Yang 的插画作品，仅供赏析

我们截取第一种风格的局部，放大观察并总结一下：

1. 噪点颗粒明显，并且噪点的间隙会把底部的颜色透出来。

2. 叠加肌理时会透出上一层肌理，但是叠加的越重就会越实。

3. 在结构转折处和边缘有描边。

再总结一下第二种风格的插画特点：

1. 颜色和噪点的过渡柔和

2. 边缘用亮色或重色拉开对比，轮廓清晰

3. 在最亮处有高光点

把这 6 点结合起来就是我们这次的刻画风格啦~

1. 确定主题收集图片素材：

在开始之前，要先想想画啥。咱们列个思维导图，把场景分成室内室外都在干啥，可以多想一些好玩的事。这里我选了做瑜伽，躺着玩手机，路上踩到了口香糖和快乐逛街这 4 个。

现在关键的来了，根据这 4 个小场景来找合适的人物动作参考和一些道具参考，一定要多找参考！！！多找参考！！！找参考！！！重要的事情说三遍！

• 瑜伽篇：

瑜伽这张我找了个动作接近框型的一个动作，然后根据瑜伽休闲惬意的感觉，我找了个室内植物还有小鸟和纸飞机，想代表她随着身体的放松，精神也慢慢飞向了远方。

在动笔之前我们先分析一下人物的比例和特点。

人物风格分析：

① 人物头身比特点：人物比例在 11 头身左右，因为人物动作有折叠，头占画面七分之一左右。

人物上半身在 4 头左右，腿长 7 个头左右，手长 6 头左右。

② 人物四肢特点：四肢偏粗方，可以想象是多个矩形和梯形相接，衔接的时候注意关节弧度。

2. 画草图

① 先提取动作框架，根据我们分析好的头身比例调整放在框里使得四肢贴边呈方形。 

② 给框架加肉，根据之前的四肢分析，多用方形和圆矩形概括，这里我把女生的头发换成了大波浪，增加了飘逸的感觉。同时曲线也会方便后期刻画。

③ 同理，植物直接用一个弯的水滴型概括叶片和叶茎，鸟用半圆形概括身子加上小半圆的头和四边形的尾巴就概括出来了啦~

④ 最后整合一下元素开了个“天窗脑洞”，纸飞机飞进这个天窗。然后在植物边上用黄色的线条加了一些灵动的水滴，这张瑜伽就做好了。

• 快乐逛街篇：

第二张购物的也是同理先找参考，大部分逛街的动作都是比较平缓的走路类的姿势，这里我特意找了一个幅度较大的舞蹈动作，再找了一些服装参考。另外我打算用水加上金币流入黑洞的方式表现“花钱如流水”的概念。

步骤和之前的都是一样的，这里加入一个水流小 tip：

• 踩到口香糖篇：

第三张我想的是男生在赶去上班的路上踩口香糖，草图同样是从动态提取入手，我想让手和脚上的口香糖有个互动，就把原动作的脚抬起来了一点，让手靠近鞋子去抓口香糖。另外我把左边的手大臂伸平小臂转过来做一个看手表的动作，表示他要迟到的焦急。

• 躺着玩手机篇：

第四张我这边提取的是一个躺着翘腿的人物动态，为了让整个人物能符合方形构图，我把人物左手抵着地把人物上半身撑起来了点，头发用大小不一的泡泡在边缘处排列，接着我夸张了翘起来的腿使得整个动作幅度更大，同时也让整个构图更充实。最后我在手机前面加入了一个大泡泡的元素，暗示我们时常沉浸在手机信息带来的巨大泡影里。

铺色可以用钢笔勾闭合形状，也可以用 ps 自带的硬边缘笔刷画。

配色以补色为主，在色轮上呈 180 度的变化，以这张瑜伽举例，能看到比较明显的橙色和蓝色，在这对颜色基础上再加入了它们的相邻色作为点缀色，在色轮上呈 30 度左右变化。

• 笔刷介绍

终于到了激动人心的刻画环节了，这次给大家准备了村口高质量彩铅噪点笔刷~~我这边已经按照绘画顺序和效果类别整理好了~~（后台回复【插画046】领取）

这里重点介绍一下这几个笔刷！

• 皮肤刻画

给皮肤增加色素，首先我们要增加的区域分为：

1. 五官例如：鼻子，眼睛，腮红，耳朵

2. 阴影例如：脖子，腋下，衣服的阴影，以及身体转折处来加重

以人物面部举例，选一个比皮肤更深一点的颜色用【软底纹笔刷】由重到轻地上色素，颜色就会自然的过渡过去。

接着用【点状排线笔】再加重一遍。

用一样的方法把身体部分画完，最后可以在边缘处（比如手脚接触的地方，手指缝）加重线用于区分色块

• 服装道具刻画：

画衣服和道具这类面积比较大元素时，第一步先把颜色提亮，第二步再铺排线纹理（选一个你喜欢的方向）并在关节处加重。

第三步用【软底纹笔刷】根据光源加重裤子阴影，腿弯折处用套索工具勾出来铺色加重，第四步用【点状排线笔刷】加重阴影处，颜色越重面积越小。

最后在转折处勾勒更深的边线就 ok 了~

• 背景元素刻画：

用【软底纹笔刷】加肌理，【速写铅笔】加装饰线的方式把其他的植物和小鸟元素刻画完。

暗色背景的星星第一步在星星里铺上背景色，然后用亮色把中间提亮，第二步给星星中间用白色画个细十字线，星星底部顺着四个角画延长线条再复制一层缩小旋转 45 度，最后用【高光笔】点底部点一个亮光，亮色背景的星星不用刻画直接做延长线和提亮高光就可以。

• 头发刻画：

首先第一步也是把头发底色提亮，第二步用波浪线把头发分成中间粗两边细的叶片形式，然后第三步在叶片里加线条，线条遵循两侧密中间疏的原则向焦点聚拢。

第四步在线条密集的地方用使用【软底纹笔刷】加重，中间轻轻带过，头发体积感就出来了。

最后再在头发亮的地方用线性减淡的图层模式用【高光笔刷】提亮一下，边缘用【速写铅笔】轻轻勾勒一条浅色边缘就ok了~

• 背景肌理：

第一步先把背景提亮至白色，第二步用【软底纹笔刷】用力的涂色，这样铺完色后就会有些白色的点点透出来了。

第三步用【点状排线笔刷】加重物体下方让他们看起来有点投影的状态就 ok 了！

• 材质和质感表现：

1. 水滴材质：

来到了我们画面的点睛之笔的部分了，在画这种半透明状的物件东西是可以吸环境色涂在中间，让水滴两侧保持亮色就会有透明的质感呈现出来，最后点上高光水滴的透明质感就做出来了。

2. 泡泡材质： 

在这张躺着看手机里有一个泡泡的材质，它的绘制逻辑其实跟纸飞机拖尾是一样的，但是泡泡的颜色会更复杂一点，所以我们先来分析一下泡泡的颜色怎么画。

拿泡泡的一个小弧度边举例，从左到右的颜色就是从黄→红→粉→紫→蓝→绿这样的颜色变化。

所以我们照葫芦画瓢，先画出一个一样的形状，用【后悔药】橡皮擦，擦出透明渐变，擦的时候在弧度凸的地方多保留一点，凹的地方轻轻擦。

接着用【软底纹笔刷】画出颜色，注意颜色的位置和占比也一样参考照片。在颜色衔接的地方用笔刷轻轻的覆盖上去就会比较自然，在光源位置画出白色的高光。

继续把完整的泡泡画出来，再加上一点线条装饰一个泡泡就画好了！

3. 画面光泽：

用【高光笔刷】把图层模式调成线性减淡模式在光源方向提亮，再用【速写铅笔】在最亮处点一个小高光，整张就画完啦~

掌握了这些刻画方式，再加一点耐心和时间这 4 张就画好啦~~

1. 人物动作转化和道具的分配要贴合方形构图。

2. 加入主色的邻近色丰富画面。

3. 刻画颜色遵循阴影颜色越重面积越小，高光越亮面积越小的逻辑，让重的更重，亮的更亮，拉开对比。

4. 你永远可以相信后悔药橡皮擦，画多了就擦掉所以大胆画吧~

作者：蓝贵莲

转载请注明：学UI网》从构思讲起，手把手带你绘制一套彩铅噪点人物插画！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

从根儿上捋一捋，人类社会经济最根本的是“互通有无，各取所需”这八个字。更高效的生产力决定了更好的交换能力。只要制造业的生产线还能继续开足马力，源源不断的生产出生活必需品，那么就有相应的“场景”去交换它们。这个“场景”最终的末端形式就是“店”。有了互联网交易这个场景之后，门店（门市）就成了“线下店”。“线上店”就啥都好吗？

显然不是。人跟人之间隔着一个“网线”，我们对小物件或者低价值的小商品或许还有很大的容忍度。但是，对于你的家庭服务需求，你要找的是一位共同在家里生活朝夕相处、带娃、护老的阿姨，不见一见，放心吗？所以就需要这么“一个专业的家庭服务门店”来提供面对面的咨询，以及培训出优秀的阿姨来提供令你和你的家人满意的服务。

不得不说，在这个领域里，还没有一个“一统天下”的品牌和绝对“统治力”的产品。而顺应趋势来看，开放生育和老龄化，这确实是一个“有发展空间”的行业，需要这么一个“门店”。有的行业在没落，有的，则在生长。

门店标准化背后有怎样的运作逻辑？它的本质是什么？后疫情时代如何做门店形象标准化？

门店做标准化当然不仅是说品牌露出好、有助于打开潜在客户心智、顾客选择偏向这些理由。标准化本身除了品牌、效率之外的比较重要一点，就是这套运营标准能使加盟老板、乃至员工都能够迅速进入“经营”的状态，并逐步迭代总结，再通过标准化把经验传递下去。标准化这套法子能使老板少走弯路，早盈利。老板盈利赚到钱了，品牌方就有了更大的话语权，实现更大的商业企图。

在后疫情时代，人们的钱袋子紧了，老板在经营投入上谨慎了，设计上的发挥空间狭窄了。门店的装修标准化不妨从“设计形式上比友商好一点，材料便宜点，执行容易点”上入手。

设计形式好一点

往大了说是“差异化”。从材料、颜色、铺贴方式三个角度去探索，任何一个角度提上一个LEVEL就可以。

如果只差一点，等友商迭代升级怎么办？

不同于“线上店”，线下门店的装修周期有比较明确的规律。三年小装，五年大装，装修早了不赚钱，装修晚了不符合当下品牌发展阶段了，保持小步迭代的策略即可。

材料便宜点

装修材料水深，不探讨材料的品牌和产地。这里的便宜体现在品牌商的标准化管理成本，就是加盟商对材料的采购难易程度。如果买不到或者总缺货，加盟商的免租期是有限的，很可能导致“平替”的事情发生，但这个“平替”不是真的能平，很可能是向下“平”。从而出现失控的设计落地结果。同时，对品牌元素应保持绝对的掌控力，统一采购配发（路边广告店自由发挥的结果超乎想象）。

上面提到的装修周期，这也决定了在选材上要选择符合盈利模型的材料。不要追求极致的耐用而导致成本提升。

执行容易点

让施工的人能明白标准化的设计意图。不同的施工师傅对同样的设计图纸理解而施工出来的结果可能是不同的。所以做出明确设计意图、图纸、以往项目中的错误做法。并不是说，写得越多越详细越好。我恰恰在这上面深有体会，忽略了施工师傅的办公环境和项目节奏。我们管这叫“由于缺少用户习惯调研导致产品无法触达用户心智。”

要知道，用户面对，洋洋洒洒几大篇的描述，往往不愿意去阅读，所以尽量采用短视频的形式去说明效果会更好。

在弱矩阵组织中设计的影响力边界在哪？受控环境下的设计管理如何发挥最大效能？

说到这，终于到了正题。似乎设计师往往都是弱势群体，很大程度上取决于组织架构的形式。大多数品牌公司的设计组织都是依托于产品侧的诉求。例外的是乙方设计公司，因为设计本身对公司来说就是产品。

弱矩阵的组织更像是临时抽调人力组成的作战小组，平时各职能人员都在自己组织内处理常规业务需求发挥职能。这个组织形式上，也影响了参与者在项目中的投入精力。设计师在有限投入的情况下，需要更好的把设计流程和设计落地规则以及检验标准沉淀，以供其他各个环节的职能人员查阅和重复利用。

上面所说的，经验丰富的设计师可能已经驾轻就熟了。再说说另外的思考。

我想，还可以做进一步完善审批流程、辅助工具、权重区分、沉淀文档四个部分。

审批流程

提到审批流程，十几年前新兴的互联网行业热衷于“扁平化”，对传统行业的审批流程嗤之以鼻。时至今日，当年的新兴的互联网也演化成了传统互联网，组织架构越发庞大，职能划分也越来越细，业务也趋近于稳定。现在再看扁平化，不过是企业或者行业在发展初期无法形成稳定的流程体系和组织结构。审批流程在高并发、时效性强的项目中，可以为你分担更多的监督节点。各个职能去监督各自擅长领域，识别和规避风险。

辅助工具

这一年最大的感触就是资源同步问题。从以邮件分发演进到网盘云端下载，都没能很好的解决这个问题。家庭服务行业之前从未真正有过的品牌化的运营。加盟商对品牌的理解力和协同力是非常初步的。并不像隔壁的3C数码行业驾轻就熟，隔壁的加盟商甚至形成了自己的一套品牌管理组织架构，主动去拥抱品牌。品牌标准化的落地不要局限于“手册”，让“手册”灵活起来并不是一件难事。尝试通过线上智能客服的方式，使加盟商通过关键字获得资源同步，或常见疑问解答。要保证沟通平台不能跳跃，比如常用微信群沟通，就不要一竿子支到公众号，这反而增加了理解成本。好的工具可以事半功倍，将设计师从重复的沟通中解放出来，将其精力投入到设计当中。

权重区分

加盟商开店和装修项目是一个高并发的项目。往往集中在行业淡季，这就导致在有限时间和有限资源配置下，做出权重区分。厘清各个项目条件的轻重缓急，比如说：搬家新址的项目权重是最高的，因为他面临旧址无法继续运营的情况。翻新升级的可以稍等一段时间，不影响他的正常运营。

沉淀经验

不总结不沉淀，就跟人失忆是一样的。好的经验要沉淀，失败的经验也要沉淀。甚至说，失败的经验比正确的经验更有用。这说明它有盲区，也许是管理上的盲区，也许是执行上的盲区，它可能是系统性的问题。这在跨部门沟通和团队扩张的过程中会帮助业务变得更加稳定，为项目增加抗体。

以上就是我分享的内容。当然，我并不是都做到了尽如人意，也有还在进行和改进中的事项。如果整套搬运项目管理体系会与项目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

设计更多的是事前去思考和谋划如何去实现，这其中少不了去理解行业和落地流程，深入思考和理清逻辑。设计师的认知边界在哪里，影响力的边界就在哪里。

逆水行舟，不进则退。

作者：环铁艺术家

转载请注明：学UI网》当互联网遇上线下门店，设计师能做些什么？

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

• 产品需求与设计研发的良性循环
• 今日事今日毕
• 设计文档的规范性
• 多渠道沟通
• 验收不仅仅是记录问题
• 沉淀业务组件的必要性

一、产品需求与设计研发的良性循环

从产品经理提出需求开始，到研发开发完成上线，整个过程我们可以看作是一个迭代。倘若与研发同一个迭代完成产品设计，时间上肯定是不够用。需求是永远都做不完的，一个人无论怎么埋头苦干，还是会时间紧迫无法喘息！这时候团队合作显得至关重要。我们需要进行合理的任务管理，利用工具达到更好的效果。目前我们敏捷组产品与设计小团队用的是飞书文档，它可以新建所需要的任务看板，清晰直观的看到此任务当前流转的阶段，任意拖拽方便快捷。

完善需求的详细信息，比如：所属项目、任务执行人、优先级、外审状态、敏捷组、文档链接等等，就可以从不同维度去管理任务，筛选我们想要了解的重点。

那么基于此，如果我是视觉设计，完成需求后就可以将它拖入下一泳道，等待排期。未完成的也就不会进入到排期和研发阶段，这样基本上每个迭代研发都会提前拿到相应的设计稿，尽管后续可能会有细节上的修改和返工，也不会很仓促。

二、今日事今日毕

三、设计文档的规范性

每个人都有自己习惯的设计稿排列方式。整齐、清晰、直观的布局，有利于研发快速捕捉到想要查看的信息。

⬇️ 设计文档基本由以下部分组成：目录、交互原型、交互说明、视觉稿。交互稿与视觉稿最好合并在一个文档中，方便研发查看。

⬇️ 具体到页面细节说明，可以安排在相应设计界面的附近，用清晰的数字或者标签展示。

⬇️ 如不同状态，不同变量的变化，也需要详细标注。

⬇️ 设计内容过多时，像以下细节单纯在页面上展示很容易被忽略，需要单独拿出来在旁边重点强调一下。

⬇️ 如今标注插件很多，不需要全部手动标注了，但对于一些我们认为研发会忽略和写错的尺寸、间距等，可以表示一下。设计软件的自动展示标注有时候会因为图层覆盖之类的问题点不到某些元素，这个也需要检查一下。不然研发就自由发挥了哟～

⬇️ 各式各样的组件有非常多的形式和状态，设计在引用时要明确类型，避免研发乱用。

⬇️ 比如这个全局提示组件，组件本身可以提供多行展示的样式和规则，但研发很有可能不知道某种情况下对应的展示样式，实现的不是我们预期。以下是日常迭代中研发实现的有问题的样式与正确的对比：

如上述所讲，完善补充细节，譬如图标的颜色变量，悬停变化，状态变化，引用组件备注等等，这些都是开发还原落地视觉设计的基础。页面设计中，所需的图标、图例、图片等素材，切图并压缩给到研发，最好用统一的方式去管理图标，比如iconfont，或者自己公司的组件平台等。

四、多渠道沟通

当接到新的需求并且拿到交互稿，前几周也参加了需求&交互内审，基本不会出现需求和框架大改的问题。大体了解背景和设计重点后，可完善视觉细节。

做完设计稿只是成功了一半，还需在设计内审前，发给对应的产品和交互同学评论提意见，先修改掉一波明显的问题。这是视觉设计阶段第一个比较重要的沟通，提前在大部分内容上达成共识，节省了后续评审的时间。

五、验收不仅仅是记录问题

1、项目上线前验收

提到验收是我非常头疼的事。前期设计稿准备充足的情况下，研发如果能实现到视觉稿的80%，验收起来不会特别吃力。有时会遇到验收内容多，前端还原度低，耗费设计同学大量时间，建立良好的验收机制非常关键，与研发同学的沟通和磨合也是必不可少的。

涉及到人员较少时，可以坐到一起面对面去沟通；若此次内容较多，涉及不同人，可建立文档。

一遍验收后并不完美，基本要2-3轮的继续走查，针对优先级比较高或者问题重灾区，标红后给到相应负责的前端继续修改，保证上线前90%以上的问题得到解决。若还有问题遗留，可新建kaptain任务后续优化，让验收问题有迹可循。

线上已有问题，按照模块集中归纳，建立对应的研发任务。开发过程中可与前端同学随时沟通，提供细节补充。

有时我们认为很简单的去掉一条间隔线或者间距，可能涉及到非常多不同的场景面板，提前沟通也有利于研发评估工作量。

六、沉淀业务组件的必要性

每当开始新的项目设计，要费好大功夫找源文件呀。适当的归纳整理历史文档，也有助于我们快速的进入设计状态，对新人也很友好！

以业务需求为背景，在组件库的基础之上，业务组件的整理尤为重要。按照每个人的使用习惯，我们可以建立自己的“业务”组件库，方便需求迭代时快速定位。

比如，我们可以将业务组件分为几部分：图标、图例、场景等，进而细化场景中的内容。至于怎么去命名和排版细节，都可以按照自己的习惯来整理，当然组件形成后也可以扩大到我们同业务线的UX或交互同学一起使用，提高设计效率。

可能对于非设计岗位来说，看到的仅仅是一张设计图，但在设计稿背后我们需要去支持和处理的细节也是非常有价值的存在。

希望这篇小小滴文章可以带给你一定的帮助 ~(≧▽≦)/~

作者：小柴

转载请注明：学UI网》这些设计细节你知道吗？

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

低代码开发平台（LCDP，英文全称为 Low-Code Development Platform），顾名思义，就是仅需通过少量代码或无需代码就可以快速生成应用程序的开发平台。借助低代码平台，你不需要像程序员一样写代码，而是仅通过对于组件和模块的拖、拉、拼、接就可以很迅速地搭建出一系列页面，完成一个基础产品。

低代码平台 OutSystems 的功能界面

低代码平台的诞生和发展的进程简述如下：

– 2000年：可视化编程语言诞生，通过一些可视化的界面来辅助用户进行编程；

– 2014年：著名的研究机构 Forrester 正式提出低代码开发概念，并投身对该平台的研究当中，低代码平台在国外兴起；

– 2016年：国内的低代码平台相继发布；

– 2021年：中国市场的低代码生态体系也逐步建立了起来，且正在加速发展，待开启一个新纪元。

作为帮助企业和团队快速搭建产品、实现数字化的新工具，低代码平台的核心功能有以下几点：

1.可视化

以简洁的图形化操作界面为主，做到通俗易懂，降低使用者的操作门槛，开箱即用；同时你可以在搭建好的界面中进行试用操作，所见即所得。

2.模型化

可以通过拖、拉、拽等方式拼接平台上的组件，用来搭建页面。可以灵活定义模型中的字段、元素和大部分布局。

3.工程化

通常包含开发调试、自动发布上线、数据监测等一站式的产品开发能力。

4.扩展性

支持少量的代码扩展，可以实现一部分个性化的产品设计和开发需求，也可以和更多第三方工具联动应用，做到功能和信息的互通共享。

和组件库一样，低代码平台也是一种提效工具。但它与组件库的不同之处在于：

1、有成套的成熟解决方案。

低代码平台提供的不仅是原子级别的组件，也包括页面的模版、产品功能的框架和操作流程，比如提供各类企业级应用常见的聚合表、仪表盘、报表等已经成熟的功能界面解决方案。

2、能顺畅衔接第三方工具。

3、注重流程而非单点提效。

让各个产研环节之间更易产生联动，适用于互联网产品研发的全流程，不再局限于设计和开发环节，也可以从业务、产品侧直接做输入。

理想化的情况是，业务侧和产品侧也可以轻松地使用低代码平台上提供的解决方案做出高质量的“原型图”，甚至是产品的基础版本，设计师仅需要做部分调整，开发检查优化下代码，产品就可以直接上线，比现在的工作流程要高效很多。

而且当产品侧在低代码平台上对文案做出调整后，相应的代码也会直接产生变化，这样就大大减少 “产品 – 设计 – 开发” 这种单线程的沟通方式带来的细节调整上的时间成本和错误率。

二、对于设计师工作的影响

低代码平台带来的产研方式的革新，对于不追求个性化体验的、从0-1的、功能相对单一、通用的企业级产品是合适使用的。这类产品的产研场景中，低代码平台可以代替设计师和开发完成重复性、低价值的体力劳动。

不过，低代码平台在现阶段也并非适用于所有产品。这种方式做出的页面质量和功能自由度会受限于可视化编辑器所提供的服务和能力，如果编辑器不支持某种自定义的功能样式，那么产品形态在实现业务需求的过程中就会受限。所以对于业务需求和用户体验要求较高的业务领域，低代码平台目前起到的作用还是有限的。

目前，接触低代码平台的设计师可以被分为两类，一类是用低代码平台的“用户”，也就是自己参与的业务已经开始使用低代码平台做提效工具来做设计和研发了；另一类是设计低代码平台的“设计师”，也就是自己参与的业务就是低代码平台产品的设计。

1、对于「用户」类的设计师

使用低代码平台的一个核心思想是：低代码平台只是协助你工作的工具，不是你的替代品。它是手，而你是脑。你的思维和判断不要被工具所限制。你可以从重复性和低价值的工作中解脱出来，更多把工作的重心放在：

1.吃透业务

把时间和精力放在理解业务和用户需求、参与构建产品上，尝试让设计思维更早地介入到产品构建的过程中。低代码平台也可以变成你与产品和业务的无缝对接的桥梁，也更便于你了解他们的工作目标和方向。

2.去同质化

低代码平台的普遍应用会进一步带来企业级产品的同质化，这个时候更需要从用户需求切入，以商业、社会、人文等不同维度的设计创新来综合性地思考去同质化的解决方案，提升用户对于产品的认知，增强产品的差异化。

3.学新技能

工具在变化，你所掌握的技能也要随之更新。要充分关注和了解低代码平台的功能和进展，不仅不排斥使用，还要随之一同发展。你的工作技能将不再以设计绘图技法为主，要在低代码平台带来的协作方式变革中提升新的工作技能。

2、对于低代码平台的设计师

设计低代码平台的一个核心思想是：低代码平台本质上研究的是“业务模型”、“界面设计”与“代码实现”三者之间的关系。所以你可以：

1.从流程侧切入

需求、界面、代码通过一个可视化编辑器实现绑定在一起，其背后所对应的业务、设计和研发之间的关系不可忽视。要保证流程上的无缝对接和通畅性就需要多了解他们之间的工作协同方式。

2.从用户侧切入

从低代码平台的核心用户入手，为业务、设计和研发分别提供有针对性的功能服务，以此提高平台功能的丰富性、易用性和可拓展性。

现阶段也只是低代码平台的起步阶段，前路漫漫。如何最大限度地赋予不同类型的用户操作权力、最大程度上实现定制化、扩展到更多业务领域，都是需要继续研究的可课题。

作者：元尧

转载请注明：学UI网》工作经验｜低代码平台，会给设计师的工作带来哪些影响？

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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