干货 | 交互设计中的【排版原则】和【案例分析】

关注
干货 | 交互设计中的【排版原则】和【案例分析】www.shan-machinery.com

📃

对于 交互设计的作品集来说

最重要的 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