学UI
date
Jul 18, 2025
slug
ui-design-learning-note
status
Published
tags
Design
summary
type
Post
上次写UI相关的博客还是去年夏天，那时候算是正式的上手使用figma软件，得益于figma极度友好的上手门槛，我对设计的信心多于恐惧。时隔一年，最近又重新开始思考UI，想要记录一下。
一直觉得设计是一个很酷的领域，为此寻阅了好几本书，有专门讲色彩的（Gavin Evans · 《颜色的故事》），有设计师的成册心得（原研哉 · 《设计中的设计》）。可惜仅仅看书并不能带来设计能力的提高，甚至不太能实质的提升鉴赏能力，大概是因为看书相当于扒着墙角围观，仅能够得知墙内很是热闹，而想要有鉴赏能力，需要能够站着平视吧。想要轻松的站着平视，那当然得有一些上手做的经验，否则岂不是空谈了，费腰：）
UI的全称是User Interface，即用户界面。“界面”其实是个特别有数学感的词，以一面为界。这界面的一边是人，另一边是被隐藏的产品内部。因为UI的存在，用户能够不了解产品内部复杂机制而顺利使用产品，甚至感知不到产品内部的复杂性。
最近warden同学在练习设计，其中印象尤为深的是关于箭头icon的，大概长这样：“>”，我已经见过几千万次，认真思考应该怎么用还是第一次。
箭头icon可以放在文字的右侧，表示箭头右侧收纳了一些内容，点击箭头可以展开内容，文字是所收纳内容的说明。箭头与说明文字之间还可以放置一些留空隙，如果箭头所收纳的是供n选1的配置选项，那么可以在空隙右侧、箭头左侧紧挨着放当前所选中的选项。这样，说明文字，箭头，当前选项，以及它们之间的空隙，共同构成了一个非常高效的矩形UI区域。
如果点击箭头表示展开收纳。箭头被点击后，它的方向是否应该改变呢？假设箭头可以有上下左右四个方向，那么符合直觉的变化应该是由向右或向左变为向下，还记得我们刚刚将展开区域设计在了箭头右侧嘛？点击箭头后收纳内容展开浮现，箭头所指的方向却不是收纳区域，会非常怪异，传递给用户自相矛盾的信息。所以此时箭头的方向应该始终保持一致。
我们刚刚所设计的选项条（options bar）往往在应用中不止一个。多个相关的选项条可以在垂直方向上堆叠为一个设置区，用户可以方便的用光标在它们之间扫过，来决定设置哪一个选项条。天然的交互是用光标扫，点击在此场景下不再是最自然的交互，扫动时光标所经过的选项条可以即时的展开而无需再额外点击才能展开。
那么如果”>”左边不放置文字呢，可以用来做什么？我们在”>”左侧放置一个对成的“<”，就得到了另一个好用的UI区域，帮助我们做切换功能，可以用来对用户当前所阅读的内容翻页。如果当前用户不是在读内容而是在听音乐，这个区域则可以用来切歌。移动端设备不同于PC，屏幕小，横窄竖长，那么如果主内容是竖矩形展示，”<>”就要旋转九十度，如果主内容追求沉浸式的体验，那么我们不如大胆一点，直接隐藏这对箭头！通过onboarding的交互引导来将这个设计烙在用户的习惯之中。“刷抖音”的“刷”便是这么设计的。
如果仅允许用一个箭头，我们可以设计出怎样的UI？将箭头方向朝下，配上循环的上下曲速平移动画，周围留白足够多，这个界面将令人好奇心爆棚，适合用来引导章节切换。
一个烦恼了好久的问题：为什么现代UI越做越简单，完全没有空间来施展艺术的美感呢？曾经风靡的拟物态有纹理与光泽，而后来居上的扁平化只有线条与阴影。不可否认，扁平化是更先进的UI。虽然拟物态有更大的美感空间，但我们不要忘记，UI是用户界面，不是产品本身，如果UI过于晃目，那么产品的表现空间会因此受到挤压，UI存在的意义也就偏移了。