图形是平面设计的核心元素之一，故图形设计也是设计师必须掌握的重要能力，不论是海报设计、广告设计、包装设计、UI 设计、Logo 设计都离不开图形设计，其中最具代表性的还是要数 Logo 中的图形设计，所以葱爷从 logo 图形入手，总结了 6 个最常用的图形设计方法。
加法是图形设计中最常见、最实用的方法，即把两个或两个以上的元素组合成一个新的图形。
加法操作方式主要有两种：
第一种：将两个或两个以上元素的图形拼接或组合在一起，得到的新图形中虽然含有加法中的每一个元素，但外形轮廓已不是他们当中的任何一个图形，即它们都是新图形的子图形，这种相加的方式关键在于找到各元素可以巧妙连接的点，或者可以完美组合的方式。
△ 字母C与钻戒组合在一起。
△ 将树叶与咖啡杯巧妙连接起来。
△ 广州塔与「品」字融合在一起。
△ 字母U与H组合。
第二种：将元素 A 融合进元素 B 中，得出的图形在外形上仍保持着元素 B 的大体特征，但是元素 A 也完美地融入在里面。即 B 是母图形，A 是子图形，这种方式的关键在于元素 A 是否能完美地融入元素 B 当中。
△ 游戏手柄是子图形，河马是母图形。
△ 爱心是子图形，狐狸是母图形。
△ 海浪是子图形，树叶是母图形。
1. 实例：高音符号+眼睛
由于高音符号中间的螺旋与眼珠造型类似，所以具备了做加法的前提，但要怎么组合效果会比较好呢？我们可以尝试一下，首先我尝试了第一种方法，即把高音符和眼睛都作为新图形的子图形，如下图。
虽然两个元素都得到了完好保留，但造型不太美观、简洁，而且这两个元素的线条并没有融合起来，而是简单、粗暴的相加。所以我尝试了第二种方法，把高音符作为眼睛的子图形，如下图。
上图把两个元素完美连接了起来，整个图形比方案一简洁了不少，而且仍保有比较高的识别性，所以这个思路更靠谱，在此基础上用辅助线规范一下，这个图形设计就完成了。
即把元素 A 通过变形或者增加一点辅助元素，使其在造型上向元素 B 靠近，但仍保有图形 A 的识别性，新得到的图形介于图形 A 和 B 之间。
比喻手法成立的前提是，元素 A 与元素 B 在造型上要比较接近。
△ 通过变形把手掌比喻成鸽子。
△ 通过变形把字母V比喻成鹿头。
△ 通过在条纹状的「M」上增加一双筷子，把其比喻成面条。
1. 实例：把爱心比喻成桃子
爱心图形在外形上与桃子本来就相似，所以我们只需要在爱心上方加一片小树叶就能达到目的。
不过上图太过常规，没有设计感和独特性，所以我在爱心上做了一点加工，形成了循环的效果，如下图。
大致效果还行，接下来，我们用辅助线把这个图形比较规范地画出来就可以了。
正负形又称阴阳形，最典型的代表就是太极图，即在一个图形中，填充了颜色的部分是图形，没有填充颜色的部分也可以形成图形，正负图形通常是包围式或半包围式的。
所以正负图形设计的关键在于，既要使正形能清晰地呈现出一个图形，还得使正形的负空间也能成为一个图形，由于负形没有正形抢眼，所以负形的轮廓一定要尽量简洁、具有很强的识别性。
在 Logo 设计中，英文字母是最常被用来做正负图形的，因为英文造型够简单，且大多数字母都是包围或半包围式结构。
1. 实例：把字母D的负形设计成字母R
由于字母 D 是一个包围式结构，刚好中间有一个比较大的负形空间，所以很适合用来设计正负图形，但从下图可以看出，线结构的字母 R 并不适合做 D 的负形。
所以我们需要将 R 处理一下，使它成为一个面的图形，前后差别很大，但仍具有 R 的识别性。
调整后的 R 就可以作为 D 的负形了，其结合方式有两种，一种是全包围式的，一种是半包围式的，从下图可以看出，方案二（半包围式的）更好看、更特别一些。
同样，我们也需要对该图形进行规范。
外轮廓出来后，我们还可以在正形内增加一些细节，使其更丰富、更有层次。
还有些图形不需要全新创作，而是可以根据摄影图片描摹出来，比如很多 logo 图形喜欢描摹人物头像、雕塑、植物等图片。
由于拍摄图片的角度可能不会太好，或者整体不是特别符合我们设计的需求，所以在描摹的过程中通常要做优化调整，比如稍作简化，去掉不是特别重要的细节，只保留比较关键的部分，或适当改变其外形等等。
1. 实例：「舜皇」头像描摹
找到一张合适的图片之后，我们可以把它的明暗对比调大一点，然后在 PS 中执行图像-调整-阈值，把图片变成黑白两色，我们要做的就是把阴影部分勾出来。
当然这个过程中要主动做一些优化和调整，让这个图形要保持着跟原图比较高的相似度，且整体干净简洁，细节流畅利落。勾出大形以后加上颜色和背景，这个图形就做完了。
艺术源于生活，图形设计也是如此，但如果只是把生活中的事物直接还原成图形，未免会太过普通、没有特色，这一点在 logo 图形的设计中尤其重要。
那么如何使这些来源于生活的图形变得特别呢？其实不一定要加入其他元素，有一个很常用的方法是将原本不规则的图形几何化，比如把动物图形设计成圆形或方形。
或者用几何图形把某个元素表现出来，比如用几何图形设计英文字母就很常见。
这个方法的关键是要使图形几何化以后，仍能保持着原图形的识别性，所以我们要根据原图形本身的特点，来反复尝试看它适合转化成哪种几何图形。
1. 实例：圆形的「购」字设计
比如说「购」字，如果把它设计成矩形会很容易，但会缺少特点，因为它本身的外形就很接近矩形，所以我打算把它设计成圆形，能不能行得通呢？我们可以先在草图上试一试。
从草图中可以看出，购字还是可以设计成圆形的，于是我用比较规范的手法把它在 Ai 里画出来，这样就得到了一个圆形的「购」字，很特别也很有设计感，但仍不难看出这是一个「购」字。
置换也是图形设计中常用的手法，即用元素 A 替换元素 B 中的某个局部从而得到图形 C，这要求元素 A 与元素 B 的某个局部在造型上有一定的相似性，这样图形 C 保留元素 B 的外形特征和识别性，这一方法在字体设计中也经常会用到。
需要注意的是，置换过来的元素 A 在设计风格和细节处理上，都要与元素 B 统一。
1. 实例：猪猪冰淇淋图形设计
球形冰淇淋的上半部分是球形的，而把猪设计成圆形的图形也很多，所以用猪置换冰淇淋球也是很简单、很自然的事情。
由于雪糕筒的风格是很简洁的描边风格，所以猪的设计风格也要与其统一。
接下来只要在猪的图形上加一个雪糕筒就可以了，调整一下二者的比例关系，统一线条粗细，一个猪猪冰淇淋图形就设计好了。
图形设计的方法还有很多，大家可以通过看大量的作品来自行总结，不过，最重要的不是知道这些方法，而是懂得如何通过正确地使用它们设计出优秀的图形。牢记设计的基本原则，多观察生活中的事物，寻找不同造型的特点，并多去尝试把它们联系起来，或者是把他们用另外一种方式表现出来，长此以往，你对图形设计的感觉一定会越来越强。
作者：蓝蓝
表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。
UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。
一、基础的表格设计美化
基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。
为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。
可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。
二、特别宽的表格怎么设计？
有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：
方法一
如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。
方法二
如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。
表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。
方法三
大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。
上图：大表格里面嵌套小表格
方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。
一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。
第三 与表格配合的部分设计
第一种 “搜索查询”和“过滤”部分的设计
大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。
过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。
上图：搜索和卡片式信息的组合
第二种 表格操作部分的设计
对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。
也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，
还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。
第三种 表格和卡片式设计、统计图的整合切换
表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。
有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。
日常设计中，我们可以收集一些类型海报，去分析它们的特点进行练习，逐渐熟练掌握各个风格特征。
我们知道，透过现象看本质，才能实现真正意义上的认识。其实版式设计也是一样的，归根到底，版式要素就是由文字与图形或者图片组成的，因此文字的编排、图形或图片的运用以及色彩的搭配将成为我们学习的重点。
前几天抽空看了一些美国西部电影，发现西部牛仔的形象真的是一个字，帅。他们头戴墨西哥式宽沿高顶毡帽、腰挎柯尔特左轮手枪或肩扛温彻斯特步枪、身缠子弹带、穿着牛仔裤皮上衣、以及束袖紧身多袋牛仔服、足蹬一双饰有刺马钉的高筒皮套靴、颈围一块色彩鲜艳夺目的印花大方巾、骑着快马风驰电掣，形象威猛而洒脱。
今天我们就以西部牛仔为命题设计一幅海报，看看这类海报的具体设计思路是怎样的，说到牛仔电影，就不得不提克林特伊斯特伍德演的「镖客三部曲」，牛仔的机智、勇敢、沉着、冷静体现的淋漓尽致，还有那深邃的眼神，真的是被圈粉。
那时的电影海报不多，多为手绘的形式展现，可以看出三幅海报中文字的编排跟主人物的结合非常巧妙。第一幅主标题的梯形形式，第二幅居中形式，第三幅左右环绕人物的形式，充分的使用信息解决了空间问题。
下面这三幅是电影「被解放的姜戈」的宣传海报，这是我几年前看的了，里面还有帅帅的小李子，在电影里有点坏。
上面三幅都是以剪影为主视觉，以裂开的链子为最主要视觉点，呼应电影中的核心主旨——被解放，后面两幅通过移动主视觉的位置换了构图，信息编排也随之改变。这种剪影效果十分值得借鉴。
下面进入今天的分享时间，噔噔噔噔~
我们将从网上整理好的文案进行简单的层级划分。
STEP 01 ：构图方式
这里我选用上下分割构图来进行设计，上方准备放个牛仔的形象，下面放置信息。
STEP 02 ：主体刻画
接下来我们选择一个极具张力的素材图，素材有透视的效果，枪口还起到了聚焦的作用。
下面我们来刻画主标题，牛仔的形象是硬朗冷静，所以椅子选用粗黑体，同时结合有肌理的英文字体进行编排。
这里我用封套工具做了透视的效果，同时加上色块来承载信息，这样视觉上有远近的感觉，视觉效果更丰富。
最后我们将处理好的主体和主标题都放入画面中，对人物进行适当旋转，同时标出剩余信息的大概位置。
STEP 03：信息处理
接下来我们将剩余的信息做个处理，文字右侧，加上一个牛仔骑马的剪影。
我们将处理好的信息全部放入到画面中，版式的骨骼基本就确定了。
STEP 04：优化版面
之后来搭配颜色，我们选用复古的颜色做背景，同时文字根据人物的颜色进行搭配。
做到这里，画面还是略显单薄，而且很多空间位置都没有解决，那么这个时候我们需要增加相关的元素去丰富画面，人物后面我们用混合工具做一个发射型的方框；最左侧的空间用「马背上的英雄」英文翻译占据，缩小文字部分让出空间，同时加上掉落的子弹，这里需要注意子弹的疏密关系，画面立刻就丰富起来了。
最后我们加上一个类似通缉令的复古纸张效果，同时微调信息的大小，这样整个画面就完成了。
技法讲解
画出两个大小不一样的矩形，改变矩形角度和矩形框的粗细，选中混合工具。
调整渐变的矩形数量。
用混合工具选中小巨星，拖住鼠标从小矩形中心往大矩形拉，然后松开鼠标，渐变效果就完成了。
STEP 05：样机效果
OK，设计做完了，这篇海报主要就是给大家讲解利用一些简单的几何形如何丰富画面，还有一些特殊的小技巧，比如字体的简单变形，元素的重复渐变，这些都是一些小细节，却能使你的画面上升一个档次，有时不是我们不会，而是我们没有深入的思考与借鉴。
文章来源：优设 作者：趣设记
随着大数据产业的发展，越来越多的公司开始实现数据资源的管理和应用，尤其是一些在日常生活中经常使用大屏幕的大中型企业。此时，用户界面设计者需要呈现相应的视觉效果。接下来为大家介绍大屏可视化的UI设计。
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
编者按：这是 UI 设计师 Diana Malewicz 的第二篇 UI 设计分享。这一次，她要设计的是一个控制面板的界面，如何控制不同UI元素的平衡，如何从零开始构建，相当值得学习~
欢迎来到我的「UI设计指南」第二篇！如果你对于我的第一篇文章印象不错的话，那么这一篇应该也会合你胃口：
当然，请注意一点，我创建 UI 界面的过程中，绕过了通常 UI 和产品设计应该有的「用户调研」——「用户研究」——「体验分析」这样的前置步骤，而是直接开始创建干净、一致的 UI 界面。在真实的设计项目当中，开头的这些步骤是无法忽略的！
这一次我们要设计的是仪表盘界面。那么我们从基本的想法开始。
这一次，我们将会设计一个服务于医疗行业的控制面板（实际上，这个设计的初衷来源于我的姨妈，她是一名医生，不仅要治疗病人还要处理大量的文书工作），而整个设计我将会在 Sketch 中完成。
通常，我会从一个非常低保真的线框图开始。我会创建一系列的矩形线框，然后将他们按照需求和大小进行排列，直到最终满足我的想法为止。我选择了一些随机的、但是相近的色彩，确保我能看清位置就可以了。
然后我针对哪些内容在哪里显示，进行了基本的说明。
这就是一个非常原始的界面框架了。
1. Vue 无法检测实例被创建时不存在于 data 中的 property
原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
场景：
var vm = new Vue({
data:{},
// 页面不会变化
template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是响应式的
解决办法：
var vm = new Vue({
data: {
// 声明 a、b 为一个空值字符串
message: '',
},
template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'
2. Vue 无法检测对象 property 的添加或移除
原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
场景：
var vm = new Vue({
data:{
obj: {
id: 001
}
},
// 页面不会变化
template: '<div>{{ obj.message }}</div>'
})
vm.obj.message = 'hello' // 不是响应式的
delete vm.obj.id // 不是响应式的
解决办法：
// 动态添加 - Vue.set
Vue.set(vm.obj, propertyName, newValue)
// 动态添加 - vm.$set
vm.$set(vm.obj, propertyName, newValue)
// 动态添加多个
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })
// 动态移除 - Vue.delete
Vue.delete(vm.obj, propertyName)
// 动态移除 - vm.$delete
vm.$delete(vm.obj, propertyName)
3. Vue 不能检测通过数组索引直接修改一个数组项
原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。
场景：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
解决办法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
拓展：Object.defineProperty() 可以监测数组的变化
Object.defineProperty() 可以监测数组的变化。但对数组新增一个属性（index）不会监测到数据变化，因为无法监测到新增数组的下标（index），删除一个属性（index）也是。
场景：
var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
Object.defineProperty(arr, index, {
set: function(value) {
console.log('触发 setter')
item = value
},
get: function() {
console.log('触发 getter')
return item
}
})
})
arr[1] = '123' // 触发 setter
arr[1] // 触发 getter 返回值为 "123"
arr[5] = 5 // 不会触发 setter 和 getter
4. Vue 不能监测直接修改数组长度的变化
原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。
场景：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items.length = 2 // 不是响应性的
解决办法：
vm.items.splice(newLength)
5. 在异步更新执行之前操作 DOM 数据不会变化
原因：Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
场景：
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化
解决办法：
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
vm.$el.style.color = 'red' // 文字颜色变成红色
})
拓展：异步更新带来的数据响应的误解
<!-- 页面显示：我更新啦！ -->
<div id="example">{{message.text}}</div>
var vm = new Vue({
el: '#example',
data: {
message: {},
}
})
vm.$nextTick(function () {
this.message = {}
this.message.text = '我更新啦！'
})
上段代码中，我们在 data 对象中声明了一个 message 空对象，然后在下次 DOM 更新循环结束之后触发的异步回调中，执行了如下两段代码：
this.message = {};
this.message.text = '我更新啦！'
到这里，模版更新了，页面最后会显示 我更新啦！。
模板更新了，应该具有响应式特性，如果这么想那么你就已经走入了误区。
一开始我们在 data 对象中只是声明了一个 message 空对象，并不具有 text 属性，所以该 text 属性是不具有响应式特性的。
但模板切切实实已经更新了，这又是怎么回事呢？
那是因为 Vue.js 的 DOM 更新是异步的，即当 setter 操作发生后，指令并不会立马更新，指令的更新操作会有一个延迟，当指令更新真正执行的时候，此时 text 属性已经赋值，所以指令更新模板时得到的是新值。
模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。
具体流程如下所示：
执行 this.message = {}; 时， setter 被调用。
Vue.js 追踪到 message 依赖的 setter 被调用后，会触发 watcher 重新计算。
this.message.text = '我更新啦！'; 对 text 属性进行赋值。
异步回调逻辑执行结束之后，就会导致它的关联指令更新 DOM，指令更新开始执行。
所以真正的触发模版更新的操作是 this.message = {};这一句引起的，因为触发了 setter，所以单看上述例子，具有响应式特性的数据只有 message 这一层，它的动态添加的属性是不具备的。
对应上述第二点 - Vue 无法检测对象 property 的添加或移除
6. 循环嵌套层级太深，视图不更新？
看到网上有些人说数据更新的层级太深，导致数据不更新或者更新缓慢从而导致试图不更新？
由于我没有遇到过这种情况，在我试图重现这种场景的情况下，发现并没有上述情况的发生，所以对于这一点不进行过多描述（如果有人在真实场景下遇到这种情况留个言吧）。
针对上述情况有人给出的解决方案是使用强制更新：
如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
vm.$forceUpdate()
7. 拓展：路由参数变化时，页面不更新（数据不更新）
拓展一个因为路由参数变化，而导致页面不更新的问题，页面不更新本质上就是数据没有更新。
原因：路由视图组件引用了相同组件时，当路由参会变化时，会导致该组件无法更新，也就是我们常说中的页面无法更新的问题。
场景：
<div id="app">
<ul>
<li><router-link to="/home/foo">To Foo</router-link></li>
<li><router-link to="/home/baz">To Baz</router-link></li>
<li><router-link to="/home/bar">To Bar</router-link></li>
</ul>
<router-view></router-view>
</div>
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
}
}
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: Home },
{path: '/home/:name', component: Home }
]
})
new Vue({
el: '#app',
router
})
上段代码中，我们在路由构建选项 routes 中配置了一个动态路由 '/home/:name'，它们共用一个路由组件 Home，这代表他们复用 RouterView 。
当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message 是没有变化的。
解决办法：
解决的办法有很多种，这里只列举我常用到几种方法。
通过 watch 监听 $route 的变化。
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
},
watch: {
'$route': function() {
this.message = this.$route.params.name
}
}
}
...
new Vue({
el: '#app',
router
})
给 <router-view> 绑定 key 属性，这样 Vue 就会认为这是不同的 <router-view>。
弊端：如果从 /home 跳转到 /user 等其他路由下，我们是不用担心组件更新问题的，所以这个时候 key 属性是多余的。
<div id="app">
...
<router-view :key="key"></router-view>
</div>
输出专业规范的命名，建立有效的设计文件命名系统。
项目之初大家都会建立文件夹系统，用来存放项目资源。这时大家可以运用杜威十进制的命名方式来管理文件命名，方便排序，让我们的项目文件足够清晰，在长期的项目管理中养成一种良好的命名习惯。
项目命名规则
下面以 用户端 V2.1.0_新增直售展位 虚拟项目为例，创建各资源的子文件夹，初步完成文件管理：
00_需求文档（PRD）
01_交互设计（原型）
02_设计文件（设计）
04_竞品分析
05_动效设计
06_应用素材
07_参考资料
08_会议记录
大家可以根据不同项目的性质和流程进行增删，选择最适合自己的项目文件管理方式。
在设计文件中，我们最经常接触的就是画板、图层，少则几十，多则几百，我们需要更轻松的命名排序方式来查找我们的目标，保证团队命名风格统一，清晰的场景命名更便于设计输出和协作，也可以支持后期测试用例的填写。
此时的命名目标在于清楚展示页面的从属关系，以及流程上的交互关系。
画板&图层命名规则
每个画板和图层需要根据功能模块/类型/状态结合数字来进行命名，方便我们对页面进行排序。数字可根据项目文件的操作顺序和权重的具体情况来取舍。
00首页
01详情页
02购物车
03我的
…
在 Sketch 中我们会经常用到一个批量重命名的工具插件 Rename It，这个工具可以快速批量对画板、组、图层进行重命名。文末有一篇震震张关于这个插件的介绍，大家可以学习一下。
画板和画布的命名规范，是为了让每个项目参与者都能快速找到目标，对于设计师而言，可以主动思考页面之间的关系。
一个应用通常需要导出的切图包含众多类型：
对于切图文件夹，可以通过通用文件、控件归纳等方法进行归纳管理。
对于切图命名，可以无需考虑自己的英文命名具有普适性，记得命名最初的目标是：便于团队检索定位，因为开发人员有自己的命名习惯和命名体系。
切图命名原则
标准命名原则：模块_名称_状态 ，如导航栏_按钮_点击；
全局命名规则：模块_全局_名称_状态，如导航栏_按钮_全局_点击（全局使用必须加全局标识）
注意事项
如果产品使用了两个平台的独立设计，需要 iOS 和 Android 两个手机系统的切图单独建两个文件夹，切图文件分别导出，便于前端工程师检索应用。
以上是对设计项目过程中的文件管理及命名规范的一些笔记总结，持续优化~
养成一个好的习惯从现在开始。\（ツ）/
文章来源：优设 作者：木子的小千世界
2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。几个月来，「历史性的」、「百年难遇的」、「前所未有的」、「恐慌性的」、「灾难性的」……这些词儿，如同弹幕一般，不停地出现在我们眼前。短短的几个月，许多人变了，许多家庭变了，许多事情变了，但生活还在继续前行。经历过特殊的时刻，在京东的我们，比以往任何一个时刻都要忙碌，也比以往任何一个时刻更能清晰地认识到：「京东的价值、京东给社会的力量」和「我们的责任」。
我们怀着期望，期待我们每一次的改变，都能给你们带来更多的能量。
2020 年初夏 618 来了，京东的生日之际，京东 APP9.0 全新升级，希望你们会喜欢～
1. 品牌力升级
5 月 20 日，京东零售集团宣布进行品牌升级，由原来的「多快好省」升级为「不负每一份热爱」。作为京东集团品牌战略承接的主阵地——京东 APP，将基于全新的品牌精神，着力于满足消费者的多元化、个性化的购物需求，持续对其创造更大的价值。用户在京东不仅仅能享受到好的购物体验，还能享受到更丰富、更用心的产品和服务。通过对京东 APP 不断地迭代升级，我们也向社会、向消费者诠释着京东的每一份用心；京东 APP 也承载着每一个家庭、每一位消费者对美好生活的向往，不负你、我、他（她）的每一份热爱。
2. 产品力升级
未来的 1-3 年，京东将继续在低线市场、低渗透品类上提速；通过对新老渠道、新老内容的矩阵开拓和整合，将单纯的线上购物，升级为全场景的复合式体验；通过新玩法的打造，增加用户的触点，提升粘性和频次。为了更好地承接京东战略与方向，京东 APP 的产品力也亟需升级。
3. 体验力升级
除了品牌力、产品力升级，每一次全新「京东 APP」的到来，也在为消费者不断提供更友好的使用体验力。我们也非常期望能够借助这次版本升级，对京东 APP 进行既精细、又完整的刻画和打磨，期待通过京东 APP9.0，与消费者进一步拉近彼此的距离，让体验更加细腻、更加灵动，全面升级消费者在京东 APP 的体验力。
结合京东 APP9.0 的品牌力、产品力、体验力的升级背景，我们追本溯源，探寻京东自己的脉络。
设计策略的延续升级
基于京东 APP 的核心目标，围绕购前、购中、购后三个环节强化用户内心感知，承接京东的战略在 APP 内的落地。
京东 APP4.0-5.0 主要围绕京东品牌对用户的传达感知进行输出，建立京东的品牌形象；京东 APP6.0 后开始加强场景能力，逐步打造可以满足千人千面的电商设计平台，直至现在，扩宽至全渠道场景，为用户提供更全面、更加细分的体验。
始终围绕产品策略
设计的迭代和产品思维绑定，始终围绕产品策略，一起共建用户的同理心；通过深耕设计解决方案、持续验证推导，来打造值得用户信赖的优质购物体验。
设计将各模块的功能与价值主张相结合，彼此进行联动，保障从产品到交互到视觉，到最后的方案落地都能围绕一个核心目标去服务。
京东 APP 设计始终都是以「产品、业务目标」为核心，围绕「品牌」「用户」「认知」三大方向，结合「设计趋势」来发力；但基于不同的情景、当下 APP 所处的环境，设计改版的侧重发力点有较大的差异；一般来说是「用一个版本来解决 1-2 个的重大体验问题」。
我们结合京东 APP8.0 以来的用户研究报告、用户反馈、各关键模块的数据、竞品对比，从「品牌」「用户」「认知」这三大维度着手，梳理京东 APP 的核心体验问题，进而推导出京东 APP9.0 要解决的核心问题，作为定义京东 APP9.0 设计策略的关键依据。
1. 品牌设计 ——京东APP8.0问题提炼
在细分用户的研究中，用户高频地提到 APP 的品牌感知过于冷静、直接、有距离感，氛围上不够活泼，也存在「京东是正品但价格会不会更贵？」的疑惑。打个比方，可能同样的价格，吆喝声越大，感受上会觉得大声的更便宜、更有爽感。
视觉定义上，一方面，栅格定义过于精细，影响了信息传递的流畅度，需要针对导购类、流程类场景进行差异化删减；主流程内的部分模块留白偏多，拉低了一定的屏效；另一方面，字体的部分梯度比较多、也比较相近，虽然视觉上较为协调和统一，但视觉噪音较大，对主体内容也有比较大的干扰。
人机交互时，过于直接地强调目的性，品牌灵动感待提升。
通过数据测试发现，核心模块的引流效率还有较大的提升空间；两个例子：1、可通过「严格控制变量，测试图片素材的引流效率」，提升「图片素材」的质量，优化核心模块的设计规范；2、通过「图片素材」的质量提升，加上对「坑位容器」动态打磨，经过数据测试，增强品牌灵动感的同时，可进一步提升屏效。
2. 用户感受 ——京东APP8.0问题提炼
细分垂直的用户群，在全流程内的感受上存在割裂感；各个垂直人群在 APP 主流程内已初步形成大的体验闭环框架，但体验闭环的细节还有待补齐与提升，对垂直人群的「权益和身份」的传达还需要在情境上更加一致。举个例子：未开通 PLUS 会员时，高净值人群对 PLUS 身份认同感还有较大提升空间。
商品的活动促销信息展示（时间、最优价格）层级隐藏较深、活动促销计算复杂难以理解，用户促销感受比较弱，所谓酒香真是怕巷子深。我们通过「用户在不同平台内促销感知」的用户测试对比发现，虽然京东的价格最优惠，但由于在表现层上没有进行强调，导致用户在价格感受上存在偏差。
产品感知较理性，主流程内氛围不够活泼，有距离感；这一点，新兴市场用户的感知尤为明显。
3. 认知统一 ——京东APP8.0问题提炼
页面框架一致性问题：主流程过往的版本较为侧重于单一模块内的设计，各个模块间堆积了较多设计不统一的问题。
页面内模块一致性问题：主流程的各个模块内，由于 「新旧版本」「需求不断叠加」等原因，也存在模块内的统一性问题，这增加了用户接受信息的负担。举个例子：APP 结算页在过去的一年内新增了较多的功能与提示场景，由于业务时间有 deadline，很多需求会采用体验降级方案，即用现有控件来设计方案，使得最终方案可能体验不够好，而这里埋下的体验隐患，日后依然要找机会解决。
业务和功能类型不断增加，这会导致页面相对臃肿，这时核心流程的框架亟需重新定义、向三维空间借力来舒展信息架构。
APP 整体的故事性连接还有待强化，货架式的流转只是骨架；各频道内、各模块内也应基于 APP 骨架保有自己横向与纵向故事线，在 APP 内注入故事性的血肉灵魂；让用户在 APP 内流转时，认知更清晰、体验更丰富。
1. 品牌力设计策略
延续、强化京东品牌，构建、升级「京东设计语言体系」 ，提升屏效。通过统一的强调，使品牌可知；通过情感化、IP 化、故事化的表达，使品牌可感。
色彩体系：延续京东品牌调性，主打京东红的品牌色，适当地通过增强配色、减少留白，在保留京东辨识度的同时，通过丰富的色彩体系降低 「冷淡、有距离」的感知。
例如：结合首页及推荐位的坑位颜色，拉通营销色彩规范，HSB 平衡所有色彩梯度；并结合算法给出冷暖色排布规则，区分内容丰富画面（包括首页核心楼层/我京工具与服务/用户资产我的钱包）及核心流程 HSB 平衡，色环关系，品牌色的延伸主导，再到单色、渐变的规律体验，全路径的感知；拉通京东品牌色同阶梯色环，推导所有辅助色色值，根据透明度及饱和度叠加，得到色彩使用场景及渐变关系；提炼营销体系核心规律，营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。
营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。（核心楼层为例）
字体体系：延续京东的字体建设，延续性的使用京东朗正和正黑体、加大主字号、精简字阶，拉开字体层级梯度，让用户的关注点更聚焦。针对下沉首页等重点业务采用异形字体，标题与利益点字号字重比重更大，强化营销引导。
icon 体系：线性图标全面 iconfont 化，减少 app 的体积；图标设计更简洁，减少隐喻的手法，让用户「一眼即懂」；平衡视觉的体积差，建立一致性的图标绘制尺寸规范；适当的设计图标互动的微动效，增加趣味性，带给用户「愉悦感」。
栅格体系：在屏效留用率上，基于 8.0 基础定义扩展 12 、24 的倍数关系，栅格做相应的简化；比如在首页/搜索/商详等页面，利用删格缩减间距，提高单屏屏效；首页核心楼层，利用减少间距，放大商品图片，压缩整体楼层高度，使核心内容更加突出，更便于用户识别到有效内容；
优化界面布局，巧用视觉动线，利用人们阅读的 f 型习惯，聚焦用户阅读内容；
素材设计体系：一方面，打磨坑位容器，采用动静态容器相结合的手法。另一方面，打磨坑位素材规范，动静态素材结合使用。同时，尝试压缩容器高度，与羚珑智能设计系统深度合作，进行素材和页面的测试，对运营设计的素材规范进行打磨，在容器高度压缩的同时提升素材质量，保证浏览效率不下降。
2. 用户设计策略
细分用户群体，增强氛围感知、让体验更丰富，层次更清晰。根据细分用户的习惯性、常识性认知，适当地把产品进行分层，让可知可感更加贴合用户；基于全局的统一，有意识细分用户的体验，加强各垂类用户最在意、最可感受的局部差异，从而让体验更加丰富。
PLUS 会员：提高 PLUS 会员身份认同，通过全流程内 PLUS 会员皮肤、氛围品牌一致性露出， 强化「PLUS 专属优惠价格计算」 「PLUS 到手价强化」等权益的感知，进而强化会员身份的感知、加强对 PLUS 会员的认同感。
家庭银发人群：渲染家庭情感氛围，强化优惠及促销的利益感知，简化整体的使用流程，中心化界面采用大字号，为银发人群设计。
新人用户：打造新人专属首页，强化新用户引导，多流程定投新人大礼包、发放新人专属优惠，全方位助力新人用户转化。
校园用户：着重打造年轻化的视觉氛围，拉近与校园用户的距离。
新兴市场用户：扭转用户品牌认知，基于特定人群偏好的氛围组织界面，提升流量分发效率。针对促销较为敏感的人群，通过设计的强调，加强用户低价感知，强化活动促销感知，打消购买顾虑。
3. 认知设计策略
品牌金字塔理论认为关于品牌认知的一系列表象指标，如认知度、美誉度、购买率、满意度、推荐率等，实际上反映了消费者对一个品牌认知的深入程度；这个理论，同样可以适用在产品的用户认知上，认知是一切的基础，产品的用户认知做好了，转化、推荐、满意度才能做好，能够被认知的产品更容易加强情感连接；反过来，不容易被用户认知、认知有负担、信息架构表现层复杂的产品，用户理解起来可能就有障碍，再叠加情感连接的设计，那有可能就是体验的自嗨了。
京东 APP9.0，将针对用户的主流程，骨骼精细化重构、优化流程动线，给用户提供一致性的体验，让认知减负。
4. 感受设计策略
消费者在只有认知的时候是理性的，而基于认知产生好感的时候就会变成感性。
在简化用户的信息认知的基础上，我们将强化打造「京东语言的品牌动效」在核心流程内的模块感知，结合产品的产品领域动态衔接的诉求，在设计上考虑动态效果对「整体上下文，故事连接性」的亮点承接，让用户理性购物的同时，感受到感性的愉悦。
1. 用心设计每一眼感受
设计策略：延续、强化京东品牌，完善并深入刻画京东设计语言；通过设计的语言体系，提升屏幕效率，从而带动流量分发效率、运营效率的提升。
首页视觉风格焕然一新，更灵动、更轻松。（通过 IP 和品牌辅形融入、优化色彩体系等方式，强化京东品牌；通过优化栅格系统、字体系统、色彩体系、动态效果，让界面的信息更加清晰，界面感受更灵动）
2. 用心对待每一个群体
设计策略：细分用户群体，增强氛围感知，让体验更丰富、层次更清晰。
设计要点：打造家庭专属购物体验，和家人一起在京东开心购物与互动。设计上通过暖色调和插画的铺陈，渲染家庭情感氛围；同时，界面采用更大字号，为父母量身定制。
设计要点：打造 PLUS 会员中心化与去中心化的购物体验链路；通过设计走查与用户测试，填补 PLUS 会员在全流程内的品牌、信息触点缺失；同时，从品牌、视觉、交互三个维度，统一设计语言、语境、对话方式，让 PLUS 会员在各个体验触点都能感受到一致的人机交互体验。
3. 用心打造每一个场景
设计策略：基于京东设计语言体系，构建场景；骨骼精细化重构主流程，构建「场景动线」，让体验更流畅。
设计要点：京东到家、便利店、商超、药品、鲜花等门店商品全面入驻京东 APP；用户在主流程内即可以直接搜索下单附近的门店商品，下单后最快 15 分钟内便可送达；由于到家场景依托于主流程，我们在设计时期望用户购物动线能与主流程统一，在商品池打通的基础上，体验上也能完美融合；同时，设计上需结合 LBS 场景特点，在主购物流程中，强化 LBS 与商品、配送的关联，突出商品促销与门店配送时效。
4. 用心打造每一条动线-多元化导购
设计策略：基于「京东视觉语言体系」，细分用户群体构建导购方式；根据用户特性，强化放大「多元」的体验。
设计要点：直播全面渗透，全流程强化直播触点，增大直播的分发场景的用户接触面积；同时，通过动态强化、设计强化的手法，加大对商家私域直播的引导，完善直播场景的体验。
5. 用心打造每一条动线-购物动线优化
设计策略：基于「京东视觉语言体系」骨骼精细化重构购物动线，统一交互、视觉语言，视觉降噪，让认知减负。
6. 用心简化每一次决策
设计策略：关键信息强曝光，统一交互视觉体验；让认知减负，决策更简单。
大促氛围优化：在主流程内突出大促的氛围感知，强化搜索列表、商详等主流程内的大促氛围；结合大促情绪指数设计氛围，逐渐调动用户的热情。根据用户的身份、商品的特性，在设计上突出重要信息，例如强化 PLUS 会员促销腰带等；同时，借助设计规范和设计组件，页面内弹层更加容易拓展、可自由配置。
到手价场景展示：商品详情、购物车内强调商品到手价，在设计上突出优惠结果的传达，让用户一眼便知。
7. 用心满足每一次闲暇
融入品牌、IP 元素，用心打造新颖、有趣、持续的互动玩法。
8. APP9.0
京东 APP9.0 是一个新开始；我们将用未来的时间，用心跟大家诠释，京东全新的品牌价值主张「不负每一份热爱」。用心对待、不负期待、不负热爱，我们在路上……由于篇幅有限，本文就不展开分析详细的设计方案了。
文章来源：优设 作者：京东设计中心JDC
一年一度毕业季来袭高校毕业展海报简直「神仙打架」
大家好，我是美丫姐，今年，因为疫情原因，各大高校毕业生可以说是哭笑不得，先是因为人聚不齐，拍个毕业照都拍不成，只能上手 p。
再是各高校想方设法也要让毕业生有个难忘的毕业典礼，纷纷搞了一出「赛博朋克」拨穗仪式。
这得亏是大白天，要是晚上在校园撞到这玩意儿还不得给人吓个半死！
不禁让网友纷纷大呼「搞点阳间的东西吧！」
但即便是这样，也丝毫没有减少，艺术院校办毕业展的热情全国各地各大艺术院校，都纷纷举办起了线上毕业设计展，斩断大家想逃过做毕设的念头，毕业设计展照常举办，那么毕业设计展宣传海报也一定少不了。
接下来，就让美丫姐带着大家来品品，今年各大艺术院校令人「眼花缭乱」的海报。
广美以其缩写 GAFA 组成的动态 3D 图形利用视差让人产生错觉，颇有几分韵味。
就是搭配上富有节奏的 BGM 后，让人不禁想到那句传唱大街小巷的广告词「一年逛两次海澜之家，每次都有新感觉」。
你看，这亦实亦虚的透明物体像不像甲方虚无缥缈的需求……
彼时，这一叠叠的纸张是一次次熬夜赶的作业此时毕业了，这一叠叠纸张将会是你被打回重做的稿子
去年被全网吐槽的天津美院海报，天美 2019 年毕业展海报
今年选择打一张规规矩矩的保守牌
不管甲方有多奇葩但毕竟给了钱，不管有多少坎坷都得咬着牙勇往直前 ，逆流而上！
这向四面八方发散的线条就像甲方天马行空的想法，没有重点，也似乎没有终点。
稀疏的黑白线条，就像学设计后你的头发，做设计，做到最后白了少年发，又秃了头。
这需要瞪大眼看的 PPT 式动态海报，不正代表着更新迭代快速的时尚圈嘛！
毕业，能带走的是属于大学 4 年的回忆，难以带走的，是积攒 4 年的行李，一看这阵仗，快递费肯定不便宜。
中间的圆就像催眠师摇摆的钟表，这毕设，是越做越瞌睡……
两耳不闻窗外事，一心只往屏幕钻，这才是一个优秀设计师的优良品质。
设计师：「你好，有什么需要我服务的吗？」
甲方：「需要做一个 logo，目前预算 20」
设计师：「好的，再见」
俗话说得好，做设计不带参考线，都展现不出设计师有多用心。这不，理工学院密密麻麻的参考线，哪个甲方拿到手不会觉得物超所值。
只是辅助线过于密集我看了三遍才看出写的啥。
甲方的心就像一个无底黑洞，你永远不知道他在想啥，他给你的意见也总是在你意料之外。
做设计师，不仅要会动手，还得眼观六路，耳听八方能说会道，还要会「嗅」出空气中的氛围，这才能把甲方爸爸服侍得妥妥帖帖。
每个看向不同方向的眼珠，就像一个项目有好几个甲方，每个甲方都有自己的想法。
艺术，总是得留有一丝丝神秘感才能吸引大家的眼球，就像马赛克后内容总是令人好奇。
除了大陆各大高校毕业展海报外，台湾的毕业展海报也是百花齐放。
作品记得署名，被盗了你都没地儿哭去。
水印打得再满也不如自个儿的脸辨识度高，实际上毕业作品是个 AR 滤镜。
设计就是一场探索，多走几次，就能摸清楚甲方的套路。
选专业前犹豫做什么设计，设计系毕业后：「做什么设计！」
遇到蛮不讲理的甲方，多深呼吸几次忍忍也就过去了。
保持一个乐观的心态，才能发现设计的世界多姿多彩。
你看这从上到下密密麻麻的人海，就像是一次次尝试够到甲方需求，却又一次次失败的你。
看这毕设把孩子逼得这医院看来没少去。
无论何时，回忆起肝毕设的日子，就连软件页面都能浮现在眼前。
当你正式成为设计师你会发现，做多了辣眼睛的设计，你的眼球将会变成消耗品。
纵观今天所有的毕业展的海报设计，有的难以理解，有的让人出乎意料，但唯一可以肯定的是，无论条件多糟糕，哪怕不能像往年，有展馆可给学子们呈现自己的创意，热爱设计的大家，创作的热情，也没有被这场突如其来的疫情浇灭。
虽说有些海报可能不能做到，让所有人满意，但校方也尽力，为同学们搭建了一个可以展现，大学四年学习成果的舞台。
文章来源：优设 作者：你丫才美工
通常产品经理在立项前都要思考需求的实现方式：是原生做？还是 H5 做？
问题的答案会因实际情况有所不同，如果追求体验，那原生效果更好，如果追求短频快，那就选用 H5，或是两者结合。
CCtalk 是个涉及 7 大端的跨平台产品：iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中（尤其是用户增长类的项目）越来越多选择用 H5 实现，然后以低成本适配方式应用到不同客户端。
这样做的好处在于：
降低了开发成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 实现）、H5 这 4 个端的开发人员，现在采用内嵌页的方式，可以做到完全不涉及移动端和桌面端，或者仅是入口放置这类比较简单的工作。
降低了维护成本。如果有优化调整，可以只改 H5 页面，不用各个端都动手。
好处显而易见，当然这也不是件一本万利的事。看下面这张 App 和 PC 屏幕尺寸的对比图就明白了，长宽比差异这么大，页面在适配的时候，有时需要优化调整布局。
△ App和PC屏幕尺寸对比
如果要真正做到流畅顺滑的体验，流式布局是最佳选择，但是对设计和开发的要求都很高，维护成本也不小，这让大多数团队望而却步。所以还是自动适配宽度、媒体查询（断点适配）等相对低成本的方式比较香。
如何以低成本的方式做适配？这个问题涉及 2 个方面：框架和页面。
△ 框架和页面
先来看看框架，大致有 4 种：触屏、App、PC、Web。通常一个项目会涉及其中的几种，也有少数情况都涉及。（此文暂不讨论小程序，有机会再写一篇关于小程序设计的文章）
1. App
CCtalk 用的 App 框架容器是公司横向团队提供的 Web View，有 2 种：
常规的导航样式。元素包括：返回、页面标题、分享（根据需要选择展示或不展示）。安卓和 iOS 略有区别，iOS 为了导航栏的顺滑过渡效果，用的是同一个 Web View，所以无法满足在一系列页面中部分页面有分享按钮，部分页面没有分享按钮。安卓用的不是同一个 Web View，所以没有这个问题。（此处不展开讨论）
透明头部导航。常规导航无法满足一些个性化的设计需求，所以透明头部导航就应运而生了。可以对导航栏进行自定义设计，营造沉浸式的体验。
△ 2种头部
2. PC客户端
PC 客户端的框架导航包括：返回上一页，返回首页。页面内嵌时，要留意容器导航和页面导航是否有重复或遗漏。假如要保留页面导航栏，那需隐藏返回按钮；如果去掉页面导航栏，则需将导航栏上原有的操作（例如分享）通过悬浮等方式保留。
△ PC端的全局导航
一般的设计流程是：先设计触屏页面，再去看看 PC、Web 页面是否需要调整。
响应的总原则：提高屏幕利用率。
具体评估标准有 3 点：
页面元素从小到大可分为：控件→组件→模块→页面，按照不同维度的复用，并结合自身的项目经验，整理出 3 种常见的方法（此处是重点，看我看我）。欢迎小伙伴一起讨论补充。
△ 3种常见的适配方法
这种方法最简单，几乎不用动脑子。具体实施方式又分两种：
案例1-拉到指定宽度：
像帖子这类结构简单的内容页一般都可以直接拉伸。注意检查是否有遗漏操作，一般在 PC 端可以采用悬浮按钮的方案将移动端的操作保留。
△ 帖子页
案例2-居中显示，两边留白：
如果页面直接拉伸给用户增加了操作成本，可以采用将主体内容居中，页面两边留白的方式。
实名认证项目是将同一套实名认证流程复用到 3 个不同的使用场景中，所以页面需要适配触屏、web、PC 弹窗 3 个框架尺寸。如果将触屏页直接在 Web 上拉伸，那不仅样式上不美观，而且右侧的「修改」、「获取验证码」等操作按钮距离左侧的标题太远，根据格式塔的接近原理，右侧的一列蓝色操作反而会被误以为是一个整体，脱离和主体的关系，不易于操作。所以我们的做法是放弃拉伸，而是将主体内容居中显示，页面两边留白。
△ 实名认证页
这种方式虽然简单，但也要注意可能会涉及一些细节调整：
如果所有页面都能这么轻松适用于各个不同端，那对设计和开发来说真是省心省力，皆大欢喜。然而现实不会这么顺风顺水，有些页面放到不同的框架内会「水土不服」，这时就需要设计师出马做些调整。
这种调整适用于有图片和列表的页面。从设计层面改动不算大，而且开发量适中，开发也比较能接受。
案例1-排行榜
在课程排行榜项目中，有一个榜单列表页，展示榜单的具体排名和奖励等信息。
如果直接把触屏页面搬到 PC 端，满眼是大写的「丑」，从设计角度分析，用户的阅读负担和操作负担也过重，屏幕利用率低，鼠标滚了半天也没看完一半榜单。
△ 直接拉伸——丑&不好用
所以这个页面需要设计师改造一下才能适配到 PC 端，具体怎么做呢？
我们来分析一下它的页面框架和模块。页面从上到下分为：奖励 Banner、tab 区、列表区和我的排名 4 部分，结构相对来说比较简单，在 PC 端可以保持大的框架结构不变。
△ 页面结构
因为移动端是以纵向为主的屏幕，而 PC 端是宽屏，需要进行调整的模块分别是：奖励 banner区（图片类），其他名次列表（列表类）。对于图片适配，在这个项目中可以采用不同端使用不同比例图片的方案。对于列表适配，在 PC 端由 1 列调整为 2 列，以提升阅读效率。
△ 保持页面框架，调整图片和列表模块样式
案例2-课程售卖页
图片的适配处理，除了采用不同比例的多套图之外，还有另一种方式——保持图片比例不变，调整页面布局。将图片和标题从上下结构改成左右结构。
△ 课程售卖页
小结：
保持页面框架，调整模块内样式的方法适用于结构相对简单，有图片和列表等特殊元素的页面。
对于图片适配，有 2 条思路：
如果页面模块多、结构复杂，靠小改还是会造成阅读障碍和操作负荷，那就要用方法三——模块级复用，重组页面布局。
案例-课时学习页
课时学习页是个多模块的复杂页面，分别有视频播放区、课时基本信息、目录、网师、评价和推荐。整体思路是将页面结构由 1 列调整为左右 2 列，以此来提高屏幕的利用率。
模块的具体位置根据其重要性以及和内容主体的相关度来排布，例如目录：从平台角度希望用内容吸引用户，增加观看时长；从用户角度是需要经常点击切换的，对于这种重要性高又操作频繁的模块，当然应该放在第一屏内。例如推荐：和内容主体的关联度不高，所以优先级低，放在右侧较小的区域内。
△ 课时学习页
在复用模块时，要注意是否有手势操作的场景。如果触屏端有左右滑动的模块，在 PC 端适配有 2 种做法供参考：
另外，要注意浮层的特殊处理。手机端一般通过浮层展示更多信息，在 PC 端适配时，需将浮层调整为固定模块。例如移动端吸底的课程介绍浮层，在 PC 端改成固定在目录下方。
△ 浮层的适配
以上是我结合项目经验总结的 3 种低成本页面适配方法。当然，在具体的适配中还会遇到许多细节问题，需要 case by case 去处理。
文章来源：优设 作者：鱼游设计
蓝蓝设计的小编 http://www.lanlanwork.com