本文聚焦网页可浏览性（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 设计质感，方法简单，看完即可上手实操。

一、图标精度优化

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

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。

让“认识附近的人”，先变成看得见的生活场景。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Momento，一组围绕附近发现与即时分享展开的社交 App 设计。照片、头像与活动把抽象的社交功能变成具体体验。

一、项目背景：让初次进入的用户理解连接的价值
附近的人、在线状态、生活分享和本地活动，各自承载不同期待。Momento 用连续的新手引导逐一介绍这些场景，让开始使用之前的认知过程保持轻松。

图 1  发现身边朋友的引导

照片拼贴先建立真实的社交情境，标题再点出附近发现的价值。深色空间里，人物与蓝色按钮形成清晰焦点，顶部进度与跳过入口则保留轻松进入的余地。

图 2  在线与距离的关系展示

中心头像与周围节点把附近关系画成空间图形，距离与在线的概念因此更有画面感。文字、按钮与进度延续上一屏的位置，场景在变，浏览节奏保持熟悉。

二、设计策略：用稳定框架呈现不同社交情绪
①信息架构：每屏聚焦一种行为，从发现走向分享，再过渡到活动与登录。②视觉语言：黑色与深蓝衬托人物摄影，明亮蓝色标记主动作；圆角、头像与节点图形形成一致的视觉节奏。

Momento Social | 界面细节与设计启发    

图 3  分享生活的内容预告

节点与头像继续作为主要图形，围绕分享生活展开新的叙事。与前一屏相近的构图让引导保持连贯，不同标题则为相似画面赋予清楚的功能含义。

图 4  本地活动与登录衔接

活动卡片预告进入产品后可以探索的内容，底部动作转向登录，并保留注册入口。前面的社交想象在这一屏落到开始使用，图片与动作之间的过渡十分自然。

③场景化交互：进度、跳过与下一步的位置持续出现，主要变化集中在图片和场景说明。最后一屏转入登录与注册，让前面的价值介绍接上实际入口，整段引导有明确的推进关系。

三、设计启发：新手引导也可以是一段有节奏的产品叙事
每一屏给出新的社交理由，同时保留熟悉的按钮和版式。摄影负责建立情绪，短标题负责解释用途。做社区或社交产品时，这种把功能讲成生活场景的表达，比逐项罗列模块更有画面感。

如有社交、兴趣社区类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

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

本文属于反主流视角的译文复盘，直指 UX 行业的诸多现实弊病，提醒从业者不要迷信流程、术语与数据，回归设计的本质。