聊一聊习以为常的 UI 元素，其背后曲折的演变过程及设计原理。
小红点长什么样？
示能可拖转的图标长什么样？
...
我相信许多人看到上述问题后，脑中浮现的答案都是高度的一致，因为这些 UI 元素的形态似乎已经成为一种“行业共识”，甚至多年前就已被沉淀下来。但在这些已成型的 UI 元素背后，它们又是如何诞生、演变的？是如何从真实世界转变为界面上的元素，甚至符号的？
多行表单右侧配置“≡”即隐喻可被拖拽，这是从真实世界中具有相同功能的物品上寻求到的答案——在与施力方向垂直的方向上增加纹理，是真实世界中为了让用户更轻易地拖动对象，用来增加摩擦的设计。早期的拖拽符号几乎是对真实世界的复刻，后来逐渐简化，演变为既不会和常见符号“=”冲突，又不会让 Icon 形态过于复杂的三条横线符号。
此图标可以追溯至 1982 年 Susan Kare（Apple的“图标之母”）为 Apple 个人电脑系列的 Macintosh 设计的图标“微笑的电脑”，通过抽象后的眼鼻嘴来象征人脸，为大众陌生的电脑注入积极、亲和的元素。
Susan Kare 曾提起这个图标的设计灵感来自《理解漫画》一书，“简单的人脸，越是卡通，它描述、代表的人就越多。” Scott McCloud 在书中提到。他认为我们生活在一个以符号为导向的世界中，人们在看漫画时，大脑编程为识别这个图标并与我们自己联系起来，而如果图像越是具象、带有越多细节特征，人们越难产生联结，因为丰富的细节在不停地传递一个信息，我（漫画角色）与你不同。所以他提倡使用抽象的方式绘制人脸，让图像具备某种符号化，也具备通用的效果。
Susan Kare 也在另一场讲座中表达了自己关于图标通用性的其他看法，“避免让图标看起来像是某个特定的技术产品”，即尽量表达功能性而非技术性特征。因为随着时间的推移，某些技术可能会过时，一个图标可以被持久地使用，也是通用性良好的体现。
但这样的转变是完美的吗？其实，对部分难以通过颜色辨别开关状态的用户来说，并没有那么友好，但 Apple 也通过分支的辅助功能解决了这个问题——可以设置是否显示开关上的符号，这样用户就可以通过符号更明确地获取开关状态。
而这个符号也是精心设计而来：早期的开关通过单词“ON/OFF”来传递两种状态。但随着此技术逐渐普遍，相传二战期间，为了让各国的士兵与工人可绕过语言障碍，仅经过简单训练就可正确使用各电气化设备，工程师使用了国际通用的表达方式——二进制代码中的 “0” 与 “1” 来表达开关的二元状态，“ON/OFF”被通用符号所取代，圆圈“O”代表开关默认状态“关”，直线“ | ”代表“开”。
小红点是一种用来表达“新消息”的反馈方式。它的来源没有确切的说法，但它有些类似以前邮递员如何知道哪些信箱内有信件需要寄出的体验：邮递员通常并不会在每个信箱前停留，除非看到了?右侧临时竖起的小旗子或悬挂的丝巾（一种客户和邮递员约定的信号）。
早在 Windows98 中就能看到类似的用来表达“新消息”的设计——收件箱右侧展示数字，来表达电子邮件数量。而在后来“一统天下”的诺基亚塞班系统中，也延续了这种新消息的表达方式。
转折点是 2007 年 Apple 推出的第一款 iPhone，第一次在移动设备上出现了红点，后来各大手机系统也追随了这种方式。
两年后，Apple 注册了相关专利，并在 iOS 系统上开始正式使用。在这份专利中 Apple 将其描述为“图标徽章——应用程序响应于接收到某些通知消息时的表现”，红点内的内容可以是数字，图形，文本，动画，甚至四者的任意组合。
可为什么新消息的通知形式，由纯数字、标点符号转变为带底色的形式？为什么选择了红色？虽较难考究，但结合那段时间新消息反馈形式的演变过程推测，图形化解法的背后或许有如下考虑：
黑莓在 Blod 9000 中正式选择“图标徽章”，在此之前新消息的通知方式仍为图标左上角的“*”符号；有趣的是在这波更新中，“系统声音状态”的反馈形式也得到了升级，并且也使用了“图标徽章”的形式。可以看出黑莓希望用一种统一、通用的形式整合相似的信息。
红点是为了向用户传递来自应用程序“重要的”信息，有吸引用户注意力的目标。从“前注意加工（Pre-attentive Processing）”的角度出发，颜色和位置是用来获取注意力最有效的属性，而红色作为现实生活中常用来传递紧急、重要信息的颜色，自然成为了最优的选择。
而为什么调整至右上角？或许是考虑到红点的附属属性、主流的阅读方向等原因所做出的设计决策。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
