6 篇博文 含有标签「design」

如何设计优雅的 UI？答：小处落笔、主次分明、布局清爽、文字易读、色彩丰富、层次自然、图不逾矩、画龙点睛、生生不息。

此为 Part 2，前见 Part 1

色彩丰富​

• 从设计师的角度来看，HSL 色盘比 RGB 有用，因为其中的参数是人眼能够感知的:

  • 色相 hue 彩色色轮上颜色的位置/角度
  • 饱和度 saturation 是灰还是艳？0% 是灰色，100% 是最艳丽
  • 亮度 lightness 是黑还是白？0% 是纯黑，100% 是纯白，50% 是色相上的纯彩

• 你需要的色彩远比你想象的要多，五六种是远远不够的

  • 总体分为三种，每种里面的每一个颜色 7 个选择
    • 灰色
    • 主色
    • 特色 accent colors

• 从预定义的颜色里挑选

  • 如何定义色库是真正考验功力的工作，因为少有经验，得靠眼力
  • 先找最深和最浅的颜色，然后再找中间的

• 找深色的时候，可以稍微把 hue 调节 30 度以内，补充单独改动另外两个所造成的色彩不足

• 同理，灰色也不需要是纯灰，可以加一些其他颜色；有些灰色是冷色调的，有些灰色是暖色调的

• 为了解决 accessibility，不一定需要只改 saturation 和 lightness 让元素更明晰，你其实也可以改 hue，只要相对明晰即可，这样就不必变丑了

• 不要只靠颜色区分元素，还有很多其他的方法甚至能够达到更好的效果

如何设计优雅的 UI？答：小处落笔、主次分明、布局清爽、文字易读、色彩丰富、层次自然、图不逾矩、画龙点睛、生生不息。

此为 Part 3，前见 Part 1, Part 2

层次自然​

• 为什么有些元素看起来凹凸有致？因为它们有自然的 shadow 效果。然而这真的值得你花上几个小时的时间去 tweak 吗？

• 当元素在 z-axis 上提起来靠近用户的时候，会得到更多的注意力，也是 shadow 实现的

• 高阶的 shadow 使用法甚至会有两个 shadow，一个是环境光产生的 shadow，一个是直射光产生的 shadow

• flat design 也可以有层次感，一是用颜色，较亮的颜色看上去比较近，较暗的颜色看上去比较远；二是用垂直 offset 无 blur 的纯色的 shadow 比如 box-shadow: 0 4px 0 hsl(220,8%, 80%);

• 覆盖元素以产生层次感

  • 比如使用负数的 margin 比如 margin-bottom: -72px; 以覆盖两个背景元素，甚至覆盖三个元素 margin: -72px 0 -72px 0;
  • 类似地图片也可以覆盖两个背景区域，但是为了让图片更明晰，可以加上纯色的 border 区分一下

图不逾矩​

• 优雅的设计会在意每一张图片的使用，你应该使用高质量的图片；图片的使用要讲规矩

• 在图片上放文字，为了让文字更清晰，可以

  • 覆盖灰色的一层，以加灰背景
  • 降低图片对比度，以加白背景
  • 调节图片为单一颜色，以加深背景
  • 给图片加 shadow

• 图片有它自己的适用大小，不要随意改变它的 scale

  • 不要放大 icon，可以给它加纯色的圈圈
  • 不要缩小截图，上面的文字会看不清；你可以
    • 在小 screen 上截图
    • 截图本身只截重点区域
    • 非要截大图的话，用线条来取代小字，就没有读不清的问题了
  • 也不要缩小 icon，根据实际需要重新画

• 注意用户上传的图片

  • 展示的时候如果大小不一致会很乱，可以用 backgroundSize: "cover", backgroundImage: url(...);
  • 图片颜色混原本的背景颜色会看上去很奇怪，这时候用内阴影或外阴影比较合适

画龙点睛​

• 你不必总是增加新的元素以增加设计感，修改 default 的配置就能够很好看，比如
  • 将列表的子弹点换成 icon
  • 给超链接加颜色和 weight，或者有眼色的粗下划线
  • 改动 checkbox 和 radio button 之类元素的缺省设置
• 给一侧的边界加有色 border
• 给背景加颜色、或者低对比度的纹理和插图
• 给 empty states 加单独的设计
• 减少 border 的使用，想要区分颜色的边界，可以用 box-shadow、颜色或者间隔 (spacing)
• 不拘一格，列表不一定是单列的罗列，可以是多列的卡片；表格不一定是单排的，可以是复杂和多排多彩的；单选不一定是 radio button，可以是卡片

生生不息​

生活中处处是设计，用一双设计师的眼睛看世界，反复记录与分析

如何设计优雅的 UI？答：小处落笔、主次分明、布局清爽、文字易读、色彩丰富、层次自然、图不逾矩、画龙点睛、生生不息。

小处落笔​

1. 要从功能入手，不要从布局入手
2. 从小处入手，从灰度入手，逼你先把主次、布局、比较、尺寸想清楚，然后再考虑颜色
3. 不要过度设计，因为设计远没有用户实实在在用得上的产品重要
4. 小步迭代，人们容易低估实现的难度
5. 产品的个性由字体、颜色、border radius、语音等等元素共同决定。比如，越圆越活泼，越细直越严肃；蓝色不会错，金色昂贵与复杂，粉色活泼。注意不要从你的竞争对手那儿借鉴太多 ：）
6. 限制选择，把通用的参数都提前设置好，拿来即用即可，看起来更好看，做起来也更简单

主次分明​

1. 人的注意力有限，都是重点等于没有重点
2. 尺寸大小不等于重点，应综合考虑两到三种 font-weight, 两到三种颜色
3. 可以使用白底灰字来弱化文字，但是不要用彩底灰字，而是应该用彩底彩字
4. 弱化与强化混用，而不是只用强化或者只用弱化
5. 尽量不要用标签 (label: blah) ，有时候你跟不不需要标签，直接上值即可；有时候你可以把标签和值组成简短的句子；根据标签和值的重要性相应地强化和弱化
6. 文档 tag 大小不等于 UI 的大小，比如你常用 h1 做页面标题，而实际上页面标题没那么重要，应该使用常规大小和字体
7. weight 和 color 都可以起到强化和弱化的作用，要综合考虑
8. 如果有并列的三种操作的 button，要区分 primary, secondary, tertiary

布局清爽​

1. 从宽松的布局开始，因为 spacing 减起来容易加起来难
2. 从设计系统中选 spacing
3. 你不需要占据整个屏幕，你可以居中或者加 column
4. 有些元素不要用比例，而应该用定宽，比如左侧导航栏、占据一个 column 的 icon 的宽度；form 不在迫不得已的情况下不用缩小
5. 不要同比放大和缩小一个组件的所有的元素参数，而是应该在不同大小的情况小具体设计
6. 相关的东西要放在一起，间隔不相关的的东西

文字易读​

1. 从设计系统中挑选 font-size，别用 em 因为它是当前字体的相对值
2. 挑个好字体；从系统字体或者流行的字体开始总是不会错；有些字体是为标题而生，它们的水平间距更短小写字母更矮；有些字体是为了小尺寸而生，它们的水平间距更大小写字母更高；从卓越的设计那里偷师。培养直觉。
3. 注意文字段落不要太宽
4. 同一水平的不同文字，应该使用基准线对齐，align-items: baseline 而不应该用居中
5. 行高会决定用户是否能够轻易地将目光转移到下一行，宽段落用 2 倍行高，窄段落用 1.5 倍行高；小字用大行高、大字用小行高
6. 不是每个超链接都需要颜色或者下划线的
7. 多段短文可以居中对齐，多段长文要居左对齐；数字要居右对齐
8. 如果段落中单行的文字的分布因为词长而不对劲，考虑使用 hyphens: auto;
9. 调节 letter-spacing 参见上面条目 2，如果调大适宜小尺寸的字体要注意缩减 letter-spacing

网站建设者们经常犯的一个错误是：将网站设计得像一个产品宣传册。他们不遗余力地为访客罗列极尽详细的信息，但事实上，这样的网站并不能留住用户。

究其原因，是因为大多数人并不想花费大量时间了解事物是怎么运行的。他们更倾向于通过不断的尝试或仅仅是到处点击来弄清楚问题的答案。

从用户的角度来说，一个好网站能够让他们通过自己的探索和尝试找到需要的东西。基于Don’t Make Me Think, Revisited里的内容，我们总结了设计这样一个好网站必不可少的四条原则。

从简单明了的导航栏开始​

当用户初次访问一个网站时，他很难知道这个网站的规模有多大。在不了解网站结构的情况下，他也许会选择离开。这就是为什么导航栏显得如此必要。在每个页面，用户都应该能够通过导航栏定位当前位置、回到主页、搜索关键词以及找到如何使用网站的相关信息。最重要的是，导航栏必须简单明了。

设计令人印象深刻的主页​

主页通常是整个网站访问频率最高的页面，其重要性不言而喻。用户对我们网站的第一印象也取决于主页。因此，设计一个夺人眼球的主页非常必要。此外，我们还需确保在主页已经向访客传达了最重要的信息——网站愿景和目标，比如我们可以在网站Logo旁写一句描述网站愿景的标语。

使用视觉层级结构展示信息​

用户通常不会在访问网站时逐行阅读文本，而是浏览文本来检索所需信息。如果要向用户传达特定信息，我们应该学会利用视觉层级结构。规则很简单——突出显示关键信息。因此，用户将明白应该关注以及点击何处。

提高移动端的加载速度​

几年前，制作自适应的网页还只是锦上添花，而现在已经是必不可少。由于移动设备的高速发展，如今用户对移动网站的期望越来越高，并且倾向于花更多时间移动冲浪。于此同时，用户也更容易在加载速度慢时失去耐心。一方面，我们需要不断丰富和提升移动端页面的内容和交互性；另一方面，我们应该尽力提升移动端网站的加载速度以创造最佳的用户体验。

许多网站建设者常犯的一个错误是将网站创建得像产品宣传册一样。网站建设者不遗余力地为访客提供最详细的信息。然而，这种类型的网站无法留住用户。

这是因为大多数人不想花太多时间去了解事物是如何运作的。相反，他们更喜欢通过点击来尝试和自己弄明白。

从用户的角度来看，一个好的网站允许他们通过玩弄来找到所需的信息。基于《别让我思考，重温版》一书，我们总结了创建高可用性网站的四条指导原则。

从清晰的导航开始​

当用户第一次访问一个网站时，他几乎无法估计网站的规模。他可能会选择退出，因为不知道网站是如何组织的。这就是导航栏如此必要的原因。在每个页面上，导航应使用户能够定位他们的位置，如何返回主页，在哪里可以搜索关键词以及其他有关如何使用网站的额外信息。最重要的是，导航必须简单明了；否则，用户可能会感到困惑并直接点击离开。

制作一个令人印象深刻的主页​

主页可能是网站上访问频率最高的页面，其重要性不言而喻。用户对网站的第一印象取决于他们对主页的第一印象。一个令人印象深刻的主页是必不可少的。

此外，我们还需要确保向访客传达了最重要的信息，这就是我们网站的目标。书中建议，在主页上与读者有效沟通的一种方式是在网站标志旁边放置描述我们使命的标语。

使用视觉层次来呈现信息​

当我们访问一个网站时，我们并不是逐行阅读文本。相反，我们通常会扫描文本以获取所需的信息。如果您想向访客传达特定的信息，您应该学会利用视觉层次。规则很简单。关键信息应突出显示。这样用户就可以理解应该关注哪里并进行点击。隐藏重要信息只会让访客感到烦恼。

提高移动加载速度​

几年前，响应式设计只是一个加分项，但如今，它已成为必需。

1. 由于移动设备的快速发展，用户对移动网站的期望更高，并且往往在移动设备上花费更多时间浏览。
2. 如果加载速度缓慢，用户很容易变得不耐烦。
3. 我们需要丰富移动页面的内容和互动性。（为移动设备量身定制内容。）

关于 Comic Sans 的问题：

1. 字母级和段落级的不平衡视觉重量。
2. 糟糕的字距（字符之间的间距）。
3. 它在如今获得了不应得的受欢迎程度，设计于 1994 年用于屏幕显示，当时 Windows 95 并没有抗锯齿功能。
4. 普通人错误地认为他们可以借助现代技术轻松设计，而专业设计师则激烈反击。Comic Sans 是冲突最激烈的焦点之一。