📃
对于 交互设计的作品集来说
最重要的 UI设计部分
也是最难的排版部分
我们今天分享来自波兰的UI/UX设计师
Wojciech Zieliński的经验
学习他那些超越理论的实际案例
✍️ UI设计在排版上的一些原则
●站在使用者的角度
●易辨性(Legibility)
●X高(X-height)
●字腔(Counters)
●重量(Weight)
●宽比例(Wide Proportion)
●字距(Letter spacing)
展开剩余90%●易读性(Readability)
●衬线体(Serif)对上非衬线体(Sans Serif)
●行高(Line height)
●文字区域的宽度
●颜色
●留白空間
●层级(Hierarchy)
●分隔器(Separators)
●重复和节奏
⚫️
X高(X-height)
大小写之间的比例越大，字体的可读性越高。
⚫️
字腔(Counters)
英文排版的时候还有很多空白（例如：o、u、d），这些空间被称为字腔。排版专家认为这个空间越大越有助于我们分辨这个字母。
⚫️
重量(Weight)
较轻的字体通常比较重的字体更容易辨认。重量和字腔有关，必须考虑到不能修改文字的形状。
最佳文字粗细约为x-height的18％。
⚫️
寬比例(Wide Proportion)
字符的宽度相较于它的高度被称为比例。一般来说，比起压缩的字母，较宽的字母有更好的阅读性。
⚫️
字距(Letter spacing)
虽然没有一个根本的方式来计算字母的间距，但是大多数情况下，越大的文字需要更小的字距。
字型有时候会显得太开，所以必须要手动调整间距。对于UI设计来说经常出现在标题。
⚫️
易读性(Readability)
易读性关乎整体的阅读体验。我们可以轻松扫视文字编排，区分标题，副标题，段落，和区块。
这样的宏观排版使文字更具有视觉吸引力，让人更想去阅读。利用对比，颜色，大小，构图和微小的细节可以成就更好的阅读体验。
⚫️
衬线体(Serif)对上非衬线体(Sans Serif)
在twitter中沒有半個衬线字，但在Medium中有衬线字卻很合理
历史告诉我们线性字体更容易辨识。他们在传统印刷中使用了很长时间，同时提高了大型区域文字的阅读体验。线性字让我们视线更容易穿梭在文字间。
但这个原则在网页和手机上是不一样的。
其实有些无线性字体也容易阅读，而且目前视觉上更喜欢简单无装饰字体。
在网页浏览的时候，特别是手机上，我们可以看到更多的无衬线字体。而且屏幕显示器并不是一张纸，通常我们不会再网络上阅读很长的文章，而在APP中更是如此。
⚫️
行高(Line height)
讲到行距时非常推荐黄金比例。
将你的字母大小乘以1.618，你将得到完美的行高。
当然，这个规则也有例外。如果必要的话你可以随时打破这个规则。
⚫️
文字区域的宽度
为了激励读者并持续让他们阅读，你的每行文字应该有50-75个字符。
⚫️
顏色
看粉红三角区域
颜色取决于你的项目，但这里分享一个技巧。用上门👆的方式选择你的主要颜色来取代纯灰色（黑色）：
这样会比常见的#CCC更独特且有吸引力。这些小细节会让你的视觉体验更好。
⚫️
层级(Hierarchy)
层级对整体逻辑性的把控非常重要。
⚫️
分隔器(Separators)
体也容易最简单的分割器是一条直线，在手指滑动屏幕为主导的页面上，用图片来分隔可以极大的提高阅读体验感。
⚫️
重复和节奏
对重要的信息进行重复是非常必要的。如何让读者在不经意间记住关键信息，重复的地方和节奏的把控非常重要。
💻
想要做出好的排版
除了按照上面的原则多加练习
多看这些优秀的案例非常重要
案例参考
Offer 坊 | 被ACCD和LCC【交互设计】本科直录的作品集经验分享
Offer坊 | 论「伦敦艺术大学—LCC」作品集的多种表现形式
也可以来参加
SKD的软件课
SKD的3月课表
申请的朋友请加小助手微信
3月的福利大礼包
🔍3月三重福利礼包 | 海外艺术背景导师团助力【毕设】！12场免费线上公开课，还有限时的VIP作品集独家优惠……
💾 SKD线上公开课领取：室内/建筑/交互/服装/平面/纯艺术/游戏动画/艺术展/美学……
https://www.shan-machinery.com