字体

所谓的成长就是认知升级。——傅盛

做改版设计大体思路很简单，只需要做好两件事：发现问题与解决问题。今天我们先来搞定第一件事：发现问题。他说：我感觉这个页面太乱。他说：这个图标重心不稳，页面颜色有点脏，banner有点丑，图标描边粗细不一致。他说：问题出现在以下几个方面：颜色、图标、布局等等，其中颜色问题有……图标问题有……

在传统的交互设计流程中，比较看重从设计目标建立到最终方案推导过程的逻辑性、终端用户体验与用户心理认知模型的匹配性等，相关的 UCD 设计方法很多。可是，被我们奉为圭臬的那些经典交互设计流程与方法，真的足够好吗？

Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置，它们的转化率和它本身的设计优秀与否息息相关，最重要的是，它要能迅速的吸引用户的注意力，通过优秀的文案和视觉让用户立刻马上点击。今天的文章，我们通过一系列优秀的范例，帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

最近刚完成平台安畅云 2.0 的改版设计，平台模块很多，经常存在很多类似的页面和组件，若不制定统一的规范和控件，则会导致很多重复的工作，大大降低产品的设计效率；同时，平台的一致性也得不到保障。所以，我们视觉、交互、前端的小伙伴们针对我们踩过的坑，大家认真总结和提炼出一个符合公司定位的设计规范，统一公司项目的前端 UI 设计，规避不必要的设计差异和实现成本，实现设计和前端资源的效率最大化。

作为APP狂热分子，定期去App Store或者其他渠道找新鲜的产品来玩儿，已经持续了很多年。但是光浮于表面的玩儿，还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设计。

表格的设计远远没有想象的那么简单，除了纯粹的数据展示，现在的表格越来越兼顾到一些导航的功能在里面，不仅仅纵向展示数据，在横向方面也做了相应的扩展。本文作者将来详细聊一聊表格。

iOS10发布了，苹果遵循了一切从简但又增加了一些提升用户体验的功能，比如向开发者开放了更多接口，设计者又如何跟随iOS的步伐做好产品设计呢？本文是系列文章的完结篇，enjoy~Note
模板图片(template image)会丢弃图片本身的色彩，而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入，请使用文本视图。请参阅Text Views。

作为设计师有一个重要的技能：如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
1.000x 1.618 = 1.618
1.618x 1.618 = 2.618
2.618x 1.618 = 4.236
4.236x 1.618 = 6.854
6.854x 1.618 = 11.089GoldenRatio (1:1.618)
…
11.089x 1.618 = 17.942
17.942x 1.618 = 29.03
29.030x 1.618 = 46.971
46.971x 1.618 = 75.999
75.999x 1.618 = 122.966MinorSecond 15:16
MajorSecond 8:9
MinorThird 5:6
Major Third 4:5
…PerfectFourth (3:4)
…
9.969x 1.333 = 13.288
13.288x 1.333 = 17.713
17.713x 1.333 = 23.612
23.612x 1.333 = 31.475
31.475x 1.333 = 41.956
41.956x 1.333 = 55.927FontSizes
Header1: 55px
Header2: 42px
Header3: 31px
Header4: 24px
Header5: 14px
Body:17px
Caption:14px

译者按：对色彩的研究通常要么太过随意缺乏逻辑，要不太过理论化难以理解，这篇文章用非常浅显易懂的方式，讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程，给出有力的论证，并得出很棒的结论，非常值得一读。对色盲色弱来不够友好*：原文中问题一的标题是“Low Accessibility”，通常用形容来产品对残障人士的友好度不够，这一点在欧美国家经常作为需要重视的产品硬指标（也是由于他们的色盲色弱发病率比亚洲高很多）。因为在中文里没有简短精准的说法，所以我在写的是“对色盲色弱不够友好”。
逻辑性较强的人*：原文的写法是“left-brained folks”，直译是左脑型的人。通常左脑型的人被认为逻辑严谨，右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用，所以我写的是“逻辑性较强的人”。

本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。data-src
data-srcset
在加载到的时候更换为
src
srcset容器元素的尺寸：elW * elH
单张图片的尺寸：imgW * imgH
Sprites图片的尺寸：spritesW * spritesH
单张图片在Sprites图上的位置：imgPosX, imgPosY点的位置为 (x, y)
容器上的(x, y)点与容器左上角的距离为 cX, cY
Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
cX = sX, cY = sYcX = elW * x
sX = spritesW * x – imgPosX
elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

色彩在任何一种设计中都起着很重要的作用，相差不多的色彩却能给用户带来完全不同情感效果。因此，好好利用色彩与生俱来的魅力，就能让你的设计更出彩。

本文是给初学者/门外汉的五分钟设计指南。好的设计原则对任何人来说都有用。这个指南会告诉你一些基础设计原则，立即就能用得上并分享给别人。我从不学习打鼓课程，从不学习吉他课程，我靠自己摸索。我认为倘若你真的对什么东西有所热诚，你就会有动力，你就会集中注意力，你可以做任何你想做的事情。
——Dave Grohl，喷火战机乐队

在上篇中，我们聚焦产品中的用户流程行为，讨论为减少用户操作负担和优化等待而做的交互设计；在中篇中，我们从人的主观感受出发，讨论产品的礼仪和为舒适而做的交互设计；在本篇中，我们将讨论人的感知和目标，探究那些”人们其实已经知道，却没有被发现“，但伟大产品为此做的动人细节。

交互设计师的工作虽不只是画交互稿子，但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路，还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿，能够让各方工作人员有一致的工作目标，而有良好体验的交互稿，还能够便于各方理解，提高后期开发对设计的还原度，提高各方工作效率。

行为逻辑的认知，让我们在设计数字世界的产品时，把注意力放在用户上、放在用户的动机和行为上，以及发生这些行为的媒介和场景。从这个层面去思考数字世界的产品，也许更贴近交互设计的本质。

何为UED？在产品定义阶段，它是一种关乎如何解决问题的思维模式，在产品迭代期，它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点，到底是什么样的思维模式和科学验证，近一年的时间我们通过大量案例逐渐将其解构出来，并将导图成“UED内功心法”，期望能够帮助交互设计师在具体实操过程中有的放矢，更有针对性地发挥设计的价值。

大部分新手设计师可能都会遇到一个问题，设计效果很赞，为何还原效果那么差？是开发不行？然后就吐槽开发傻X，可很少有人想过是否是自自身的原因，在开发过程中就不断和开发撕逼。今天我介绍一些关键点，通过这套系统的方法来解决你的视觉还原度，希望这篇文章能帮助到你。

整理规范对设计师的基本能力有很好的锻炼作用，所以各位设计师们整理规范时不要嫌琐碎麻烦，它可以让我们慢慢变强！