本文是站酷深度解读尼尔森十大可用性启发式原则的文章，结合微信、支付宝、高德、美团等大量国内 APP 真实案例，把理论转化成设计师可直接用于自查评审的实操标准。文章指出：十大原则属于经验启发法则，不是硬性条文，用于排查可用性问题，不同场景会出现多条原则交叉叠加的情况。

本文聚焦网页可浏览性（scannability），核心观点：绝大多数用户不会逐字读完网页内容，而是快速扫视、扫描页面寻找目标信息；网页设计要顺应用户 “扫描式阅读” 的行为习惯，而不是假设用户会精读全文。文章结合 F‑模式眼动热图研究，从内容排版、视觉层级、导航、测试手段多方面给出实操方案。

有些界面第一眼很有质感：浅灰的说明、细细的边线、照片上的白色标题，整体轻盈而克制。可真正读起来，却要不断凑近屏幕。今天兰亭妙微分享Ben Walsh关于Figma无障碍检查插件的文章。比起把某款工具列为必装，我们更想聊聊它引出的一个问题：设计师在画布里觉得舒服的配色，到了不同页面和使用环境中，还能不能被清楚读到。作者开发了参评插件Perception，阅读其比较和推荐时也应记住这一背景。

设计讨论里常会出现这样的时刻：几个人都说要画一张“流程图”，真正落笔时，想表达的却不是同一件事。有人要看用户从哪里来，有人想核对页面跳转，还有人关心后台由谁处理。今天兰亭妙微分享NN/g的UX图谱文章。它整理了不同图谱的用途，我们选出与日常项目关系较近的几类，通过一个预约服务的假设场景，看看这些图为什么长得不同，又怎样放在一起使用。

文件管理界面曾经很容易理解：文件夹、列表、搜索框。现在加入AI摘要、自动标签和自然语言检索，功能更丰富，画面也更容易变乱。今天兰亭妙微分享dpopstudio的Cloudeck设计文章。这套UI Kit采用偏冷的浅色背景和较轻的卡片，整体感觉接近一个安静的工作区。我们会结合原文主题与展示图，聊聊新增AI能力时，如何保留文件管理本身的清晰感；文中的使用场景是设计讨论，不是对产品的实测。

有些看板在作品集里很好看，放进日常工作却让人无从下手：数字很多、曲线很多，但发生问题时仍然找不到该看哪里。今天兰亭妙微分享dpopstudio的Connexio设计文章。它以IoT监控为主题，展示了网站与后台的配套设计。吸引我们的地方，是它把相对复杂的信息放进了比较平静的画面里。下面既看这套UI Kit的表现，也借几个假设的值班场景，聊聊监控界面怎样安排阅读顺序。

打开一款银行App，我们通常不会先研究它用了什么字体，而是先看余额，再找刚刚那笔钱。可轮到欣赏金融产品的设计稿时，注意力又很容易被渐变卡片、手机样机和漂亮图表吸引。今天兰亭妙微分享dpopstudio的Finsmart设计文章，把画面放回这些日常动作里看看。它是一套移动银行UI Kit，适合观察视觉和页面组织；本文结合原文话题与画面展开讨论，也加入一些假设使用场景，不把展示稿当成真实银行的操作记录。

兰亭妙微ui设计公司分享：图标是 UI 界面里至关重要的视觉符号，充当用户的视觉向导，帮助用户快速识别、导航、理解界面操作。好的图标，兼顾可用性、无障碍体验与品牌调性；而设计糟糕的图标，会造成理解障碍，直接拉低产品整体用户体验。

下面这 8 条原则，可以帮你产出高效、专业的 UI 图标。

1. 保证图标清晰简洁，做到一眼可识别

图标要做到瞬间传递功能含义，过度复杂的造型会增加用户认知负担，简洁才是可用性的基础。

界面浏览时用户大多快速扫视，图标必须具备瞬时识别能力。尽量删减多余装饰，只保留核心表意细节，避免繁杂元素干扰阅读。 优先选用大众已形成共识的通用符号：放大镜代表搜索、垃圾桶代表删除。以垃圾桶图标为例，它本身表意足够直白，非特殊业务场景，无需额外叠加火焰、警示标识等多余元素。

2. 坚守视觉一致性，统一整套图标语言

一致性是图标体系的灵魂。同一产品下全套图标，必须保持统一的风格、尺寸、色彩体系。

风格割裂的图标会破坏界面整体和谐，带给用户混乱的感受。建议输出图标风格规范文档，统一网格系统、尺寸大小、圆角弧度、线条粗细、配色方案。 谷歌 Material Design 图标就是典型范例，统一的描边粗细与圆角规则，构建出完整连贯的视觉语言。

3. 适配多尺寸场景，大小屏幕都要锐利

图标会在移动端、桌面端、小尺寸标签、大展示图形等不同场景复用，无论放大缩小，都要保证辨识度。

优先采用 SVG 矢量格式，实现无损缩放；设计阶段规避极小尺寸下会糊掉的细碎细节。完成后务必多分辨率预览测试，保障缩到微型尺寸依旧清晰可读。经过优化的笔触，能让小尺寸图标也维持良好识别效果。

4. 遵循平台原生设计规范

iOS、Android、Windows 各平台，都拥有自己成熟的设计语言与图标使用惯例，遵循平台规范，能降低用户的学习成本，操作直觉更强。

设计前查阅官方文档：苹果 Human Interface Guidelines、谷歌 Material Design。 举个例子：iOS 的「分享」图标是方框加向上箭头，而安卓平台则使用三点互联样式。贴合平台习惯，用户上手会更加自然。

5. 兼顾无障碍，做到普适可用

图标需要服务全部用户，包含色弱、色盲等特殊人群。

非通用符号建议配套文字标签说明；图标与背景之间保证充足对比度；切忌单纯依靠颜色传递信息，要结合形状、文字多重表达，降低理解门槛。搭配文字标签，能够显著提升图标信息传递效率。

6. 落地用户测试，验证图标真实表意

设计师主观觉得易懂的符号，普通用户未必能读懂，可用性测试可以检验图标的直觉性与实际效果。

开展可用性调研，记录用户识别、解读图标的真实反馈；可以通过 A/B 测试对比多版方案，再基于反馈迭代优化。

NN group 把图标能力拆成两个关键维度：

• 图标识别度：用户能否辨认图形本身（例如五角星图形，能不能看出是星星）
• 图标释义度：在业务场景中，用户能否读懂符号代表的功能含义（星星在这里代表收藏，还是评分）

7. 贴合品牌视觉基因，强化产品记忆

图标是品牌视觉的一部分，应当承接品牌气质，加深用户品牌印象。

图标配色、造型、风格，需要和产品 VI、字体、插图等整套 UI 元素协调统一。不要直接套用和品牌调性冲突的通用图标，否则界面会产生割裂感。 Slack 的图标就沿用品牌标志性紫色，搭配圆润的造型，品牌体验高度统一。

8. 兼顾性能，控制图标加载成本

图标不能只看视觉效果，还要保障网页、APP 加载效率，未做优化的图标会拖慢加载速度，损耗体验。

优先选用 SVG 矢量格式，兼顾缩放能力与小体积；如果使用 PNG 等位图，务必做无损压缩；精简多余细节，控制文件体积。

写在最后

图标看着小巧，却深刻影响整个界面的体验。不必追求花哨的造型，把这 8 条准则落地，平衡清晰、统一、适配、无障碍、品牌与性能，就能做出专业好用的定制图标。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微ui设计公司分享：这个设计，总感觉不够精致……” 相信不少新人设计师都听过这句反馈。即便熬了许多夜晚反复修改稿件，参照大厂案例临摹产出，成品依旧会显得生硬，总差一点味道。

实际上绝大多数设计的粗糙感，都来源于容易被忽视的微小细节。下面结合实战案例，用低成本的调整思路，带你快速拔高 UI 设计质感，方法简单，看完即可上手实操。

一、图标精度优化

很多时候图标基础造型没问题，渐变、描边、装饰元素也都齐全，但观感依旧粗糙。可以从造型、色彩、局部装饰、整体厚度四个维度迭代：

1. 优化造型轮廓 基础形体保留，修正凸起、衔接生硬的部位，消除多余凸起，理顺图形交接处的线条，让轮廓过渡自然顺滑。

   

2. 校正色彩，避免画面发脏 图标显脏大多是深色部分亮度过低导致。把深色区块的亮度拉满，再微调饱和度与色相，其余色彩发灰发闷的区域用同样逻辑处理，颜色干净，精致度会立刻提升。

   

3. 细化装饰小元素，拒绝纯色块堆砌 图标内部的装饰图形不要直接放置纯色块。可以微调色彩，叠加柔和投影增强层次；静态元素适度旋转倾斜角度，打破呆板的正形，让图标更灵动。

   

4. 补充形体厚度，强化整体感 适当加厚描边，补足图形的厚度感，不要让厚度过于微弱，保证形体的立体感清晰可见。

进阶小技巧：还可以加入拟人化表情，赋予图标情绪，进一步提升生动性。

二、卡片精度优化

日常做卡片设计时，很多人只简单做破形处理，依靠字号、字重、颜色区分文字层级就完成输出。最终会出现信息拥挤杂乱、留白分配失衡，阅读疲惫的问题。可以按照下面四步优化：

1. 重构信息排版，合理分配占比 缩小头像等非核心组件的占比，修正局部多余留白，重新规划文字信息排布区域，让版面透气均衡。

   

2. 关键文字标签化处理 把分类、状态类文字改成标签样式，增加视觉形式，丰富设计语言。
3. 聚焦核心数据，控制视觉焦点数量 对于金额、关键数据等重点内容做视觉强化；切忌同时突出多处信息，避免页面焦点混乱。

   

4. 整合散落元素，完善破形细节 页面里零散悬浮的组件，结合卡片破形结构安放，让元素有所归属，整体更加统一。

   

写在最后

真正的精致感，并不是靠堆砌繁复的装饰元素，而是对每一处细节的精准把控。色彩参数、间距留白、投影细节，每一项微小要素，都会左右最终的视觉质感。

不要轻视小元素的处理，细节优先于复杂度。当每一处细节都经过推敲打磨，设计作品自然能够达到专业水准。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微ui设计公司分享：从 1973 年第一代图形用户界面诞生至今，GUI 已经走过半个世纪。UI 设计这一职业，也伴随着图标一同起源发展，时至今日，图标依旧是 UI 体系里举足轻重的视觉元素。下面我们就完整走进图标的世界，拆解图标设计的完整知识体系。

一、图标的起源

早期计算机采用命令行交互，使用者必须记忆大量指令参数，上手门槛极高。为了降低使用门槛，工程师创造出图形符号来指代操作与文件，图标就此诞生，初衷就是帮助普通用户无需记忆复杂命令，即可完成文件管理、任务执行。

1. 施乐公司：图标概念的开创者 1973 年施乐推出 Xerox Alto，这是世界上第一批具备图形用户界面的个人电脑。整机仅量产约 2000 台，却奠定 GUI 发展根基。界面中已经出现垃圾桶、文件夹、打印机等初代图标，成为后世图标设计的原型蓝本。

   

2. 苹果公司：推动图标走向大众 1979 年乔布斯参观施乐原型设备后，受到极大启发，着手自研图形界面电脑。1983 年苹果发布 Apple Lisa，也是苹果首款图形界面计算机。 有着 “现代图标设计之母” 称号的苏珊・卡尔担任创意总监，她设计的像素图标平衡简洁、辨识度高，放到现在依旧生动有趣。

   

3. 微软：让图标设计普及开来 1985 年微软发布 Windows 1.0，正式入局图形用户界面。系统图标借鉴部分苹果设计思路，同时发展出自家特征。随着 Windows 系统大规模普及，图标彻底成为界面设计不可缺少的组成部分。

   

二、图标设计是什么

图标设计，即创造用来指代实物、行为、抽象概念的图形符号。 它的核心特质是简洁直观，做到一眼识别。例如微信 App 图标，只用两个对话气泡，就能代表社交聊天的产品属性。图标广泛应用于软件、网页、移动端产品，承担视觉引导，简化用户操作的作用。

三、图标的分类

图标是界面的点睛之笔，缺少图标会让页面枯燥乏味；但全部使用同一种图标样式，又容易产生审美疲劳。我们可以从视觉表现和功能用途两个维度划分图标类型。

1. 按视觉表现划分（12 类）

毛玻璃图标、面性图标、线性图标、MBE 图标、扁平化图标、立体图标、轻拟物图标、写实风格图标、新拟态图标、主题图标、古风手绘图标、插画图标。

2. 按功能用途划分（6 类）

① 工具图标：B 端产品高频使用，重在承载功能，装饰属性弱。代表案例：腾讯文档工具栏编辑图标。

② 装饰图标：侧重品牌表达与情感化设计，大量使用 3D 效果提升页面质感。代表案例：腾讯电脑管家界面 IP 与装饰图形。

③ 启动图标：常结合品牌 LOGO，可搭配动态效果，传递品牌理念。代表案例：联想电脑管家动态启动页图标。

④ 进程提示图标：反馈正在进行的操作状态。代表案例：腾讯电脑管家垃圾清理转动风扇图标。

⑤ 状态提示图标：处理异常场景，如 404、空数据、页面建设中，缓解用户使用时的负面情绪。 

⑥ 趣味动效图标：依靠动态效果增添交互惊喜感，缓解等待焦虑。代表案例：联想电脑管家火箭加载动效。

四、图标设计八大核心原则

即便 AI 可以快速生成酷炫图标，设计师依旧需要掌握专业原则，用于校验、修改 AI 输出的结果，做出成套、精致的图标。

1. 大小统一 成套图标视觉体量要均衡。注意几何图形会产生视觉偏差，并非像素尺寸相等，看上去就一样大，需要依靠视觉感受做微调。

   

2. 圆角统一 同一套图标中，同类造型元素的圆角曲率必须保持一致，避免出现圆角大小不一，显得粗糙不专业。

   

3. 风格统一 同一场景、同一功能组别的图标，材质、表现手法要统一，例如整套全部采用磨砂玻璃质感。

   

4. 角度统一 扁平化、2.5D 图标，重复元素的倾斜、叠加角度需要保持一致，强化系列感。

   

5. 粗细统一 线性图标线条粗细规则统一，比如外框统一 3px，内部线条统一 2px，保证整套精致协调。

   

6. 疏密统一 成套图标图形繁简程度接近，不能一个元素饱满复杂，另一个极度简约，保证画面感受一致。

   

7. 透视统一 针对立体、2.5D 图标，整套必须使用同一套透视逻辑，避免透视混乱。

   

8. 高识别度 图标第一要务是表意清晰，用户可以快速读懂图形含义，再追求视觉美化。

   

五、图标在界面中的六大价值

图标遍布导航栏、工具栏、首页、个人中心等页面，相比纯文字，传递信息更高效，同时丰富视觉体验。

1. 提升操作效率 图形便于记忆识别，用户不用阅读大段文字，就可以快速定位功能，缩短寻找信息的时间。参考案例：华为云产品列表页面。

   

2. 提高用户满意度 精致、配色舒适，甚至带有动效的图标，能够带来良好视觉体验，优化整体产品体感。

   

3. 降低认知成本 图标大多取材于生活中熟悉的事物，不受语言、地域限制，用户理解门槛低，更容易产生共鸣。

   

4. 强化品牌形象 将品牌 LOGO 元素融入图标设计，在各个页面反复露出，持续加强品牌曝光。参考案例：腾讯云业务 banner 图标。

   

5. 丰富页面层次 大小图标搭配使用，打破纯文字页面的单调，让信息分区更清晰，页面层次更加丰满。参考案例：360AI 办公后台界面。

   

6. 消解页面枯燥感 多彩、造型生动的图标，调剂满屏文字带来的沉闷，提升浏览愉悦感。参考案例：佐糖图片工具功能面板。

   

六、图标能力提升 4 个实操技巧

1. 临摹练习，循序渐进

新手入门最有效的方式就是临摹。从简单图标开始练习，逐步提升临摹难度，在实操中积累绘制手感。

2. 持续收集优质参考

多看优秀作品，建立个人图标素材库。接到新需求的时候，就不会没有思路，快速打开创作方向。

3. 学会拆解分析作品

看到优秀图标不要只保存，要主动拆解：层次光影、叠加关系、色彩对比、质感表现分别是怎么做的。吸收别人的设计思路，转化为自己原创的能力。

4. 明确产品目标与受众

不同用户群体，适配完全不一样的图标语言。 儿童产品图标：造型圆润、色彩丰富活泼； B 端企业产品图标：配色克制，造型简洁理性，减少夸张卡通元素。

七、5 个实用图标资源网站

1. Iconfont（阿里图标库） 网址：https://www.iconfont.cn/ 国内设计师使用最多的图标平台，海量图标素材，极大提升日常工作效率。支持图标、插画、3D 资源、动效资源下载。

   

2. IconPark（字节跳动） 网址：https://iconpark.oceanengine.com/ 可以在线切换图标风格，支持调整线条粗细，一键切换线性、面性、双色样式。

   

3. Ikonate 网址：https://ikonate.com/ 在线自定义编辑线性图标，自由调整线条粗细、圆角、颜色，导出 SVG 矢量文件。

   

4. Iconfinder 网址：https://www.iconfinder.com 图标造型种类丰富，免费 / 付费资源齐全，适合找脑洞创意类图形。

   

5. Iconduck 网址：https://iconduck.com/ 拥有几十万免费图标与插画素材，资源储备量大，可商用素材较多。

   

八、图标文件命名规范

图标常见四种状态： normal (nor) 正常、highlight (hig) 高亮、selected (sel) 选中、disable (dis) 不可用。

规范命名可以方便团队协作，便于前端开发调用。 推荐命名格式：模块‑类别‑功能‑状态 示例：Nav_button_message_sel（导航‑按钮‑消息‑选中态）

附常用英文关键词参考：登录 login、加载 loading、搜索 search、导航 nav、按钮 btn、标签 tab、侧边栏 sidebar 等。

写在最后

读完这套完整的图标知识，我们可以根据不同业务场景，选对图标风格，合理运用图标设计原则。图标看似基础，但想要做好依旧需要不断复盘、积累练习。希望本篇内容可以帮到正在学习 UI、图标设计的你。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。