移动端网页在今天虽然已经变得越来越重要，但我们在日常使用中依然会遇到一些糟糕的页面。近日，开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。
在移动端方寸地，有细节才能抓住用户，可以参阅这《60个以小见大的设计细节！》，保证会学到很多。还有，记得不要犯《ANDROID应用中十大常见UX错误》
众所周知网页加载速度是网站性能的一项重要衡量指标，毕竟很多时候用户并不总是在WiFi状态下浏览网页，所以加载缓慢无疑是移动页面七宗罪之首。移动网页在设计时应该避免集成过多高分辨率的图片以及累赘的脚本文件。
当网页映入眼前，凌乱的文字排版当然也是访客难以忍受的。就像人们在现实生活中倾向于和思路清晰的人交流一样，当用户和网页“交流”时也希望能快速找到自己需要的信息。所以杂乱的排版同样是移动网页应该避免的设计误区之一。比如Eurosmartz的移动版完全不像是为移动设备设计的网页。
随着移动设备性能的提升，很多移动网页设计者倾向于在移动端堆叠更多的内容，这时导航功能就变得必不可少了。可诸多移动页面在设计导航功能时又没有足够重视其可操控性，比如按钮太过紧密、链接间距过小、菜单过于隐蔽等等。各种社交网站的点赞功能尤其容易在滑动网页时误点击。蹩脚的导航无疑严重影响了用户和网页“互动”的过程，以至于有些用户要“抱怨”自己手指太肥。
某些时候我们可能会遇到一些桌面端和移动端页面风格差异巨大的站点，比如Toybox。一些对此站点不熟悉的用户在从Toybox的桌面端跳转到移动端时，也许很难意识到这是同一个网站的两个不同版本。虽然Toybox桌面端的动态效果挺好，但这种会给用户造成极大困惑的设计明显难以得到用户的喜爱。
网页弹窗在桌面端已经令用户厌烦不已，可不幸的是一些移动端的网页设计者还是把其带到了移动页面上。毫无疑问由于移动设备屏幕尺寸的限制在移动端弹窗明显会有更好的传播效果，但无疑也会遭受到用户更多的厌恶。
当用户使用iPad访问某一个网站时将其自动重定向到适配iPad的版本，这听上去的确是一个好想法，可在实际操作中一样会遇到问题。比如当一个网站的移动版由于以上的种种问题让用户感到难以接受而想切换回桌面版时，自动重定向基本上让用户陷入了死循环。此外由于重定向而导致浏览器无法打开网页的现象也时常出现。所以在使用自动重定向功能时应该三思而行。
作为用户当然可以理解网页开发者在页面上设置一些广告，可横幅形式的广告无疑应该被归为“七宗罪”之一。从互联网的发展历程来看，横幅广告的思维好像还停留在1999年，可现在已经是2013年末尾了。
总结看来，Umer Mansoor列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项，也许是时候考虑做一些改进了。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
提到网页设计，最先想到的是当今主流的韩国设计和扁平化设计，当然个性化排版、视频代替文本、全屏大视野、滚动视差、多平台全适应等设计形式已经进入了我们的视野。西方简单、功能性的美学精神”少即是多”这一设计理念攻占了我们的大脑，很多时候，在开始做设计之前脑子里会来回浮现这些风格的设计。那么，怎样在主流设计方式中做出有自己特色的网站呢？我们从以下几点介绍在大环境下提升网站设计形式的方法。
那么，怎样在主流设计方式中作出自己的特色呢？我们从以下几点介绍些提升网站设计形式的方法：
在众多的设计师追逐主流风格的同时，民族文化感觉的设计越来越少，不光在国内，在世界各地都出现了这样的情况。当然不可否认还有很多设计师在为民族设计而努力。下面这几个站点虽然只有简单的设计和动态效果，但是却有一种非常淳朴的民族风格，这也是最吸引人的地方，每个细节都流露出民族的特点和气氛。不是只有文化性质的网站才能赋予文化设计风格，在商业产品类型的设计推广中同样适用。
日本眼药水网站，将现代工业社会的产物与传统鬼神文化中的五种妖怪以卷轴、插画传统形式展示，与漫天遍地的明星代言广告形成对比，同样是眼干、眼涩、眼疲劳，同样是以办公室、上班族为消费群，文化创意上的突破使人眼前一亮。
(小编按：那个妹子是我的女神横山美雪，吗？)和风服装店，日本特色的风铃、简约的插画，”和风”，大和民族追求与自然的和谐之美，从这个服装网站上我们可以看到日本设计文化体现了对自然的尊重，反映了朴素美学的内敛性格。
缅甸传统舞蹈音乐合奏网站，缅甸古代戏剧舞蹈，是从缅甸傀儡戏、古典戏剧及阿迎舞等古典艺术中产生的。傀儡戏中的一些节目和各种傀儡角色的不同的舞蹈动作被大量移植到现代缅甸舞中。傀儡舞中”傀儡步”、”傀儡爬跳”等成为现代缅甸舞的基本动作，是文化多样性的辉煌继承。黑白图片和大面积留白的海报设计形式，突出舞蹈者主体，用在网站上更显神秘。
http://www.itwillbeastounding.com/
俄罗斯莫斯科大剧院是莫斯科的地标性建筑之一，是莫斯科有名的芭蕾舞与歌剧剧院；是俄罗斯历史最悠久的剧院，享誉天下，是世界上最著名的剧院之一。它不仅继承了欧洲芭蕾的历史传统，更重要的是，在俄罗斯丰富的民族音乐与舞蹈的沃土上，建立和发展了自己的芭蕾体系。将沙俄古典风格融汇于设计版块中，同样大量留白处理给了图片展示更多的空间。
大面积整站或局部性使用高清图片，在之前设计分享中我们见到了很多案例，这里介绍几个日本以图片展示为主的网站，精致的图片不需要过多的装饰。
坂本龙一是日本当代最让人尊崇的音乐家之一，音乐领域涉猎甚广，在先锋电子乐领域拥有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，为1992年巴塞罗那奥运会开幕式谱曲并担任指挥……坂本龙一成为”大众明星”的原因，一方面在于他个人对于电子、摇滚、爵士等多重音乐风格极具灵感的把握；另一方面则在于他能在商业、艺术和实验之间找到平衡点，作出既有实验意义又有动听旋律的作品。
http://moonlinx.jp/special_issue/003/
日本设计强调材料的内在之美，注重与大自然的和谐，珍惜自然材质，这与日本自然资源相对稀缺有很大的关系。日式风格中，回归自然是最大的特色，推崇贴近自然、强调自然主义，让使用者有置身自然的感觉。用产品的工艺制作图片作为网站的主体和背景，拉近了观者与产品的距离。
http://www.ishiyamasenko.co.jp/
传统工艺美妆店铺，单从cover引导页的图片就能看出该店铺的卖点。特色产品图加上柔美的动态散花效果，为网站加分，导航中加入商城外链可直接在线购物，利于用户体验。
日本联合新闻社，社内的场景图片很好的展示要表达的主旨。
街区是一个城市的重要标志性特色，将这样杂乱无章的旧街道作为网站通栏头图，配合简介的形式设计，也能很出彩。
美宝莲日本网站，将实体店作为网站背景，搭建成实景的巨幅海报展板，这种形式是否比存粹的明星代言更接地气些？！
对比下面两个日韩服饰类网站，可以看出日本网站在图片选择上更注重产品本身，极具质感和张力的图片真实朴素，力求展示产品与人的关系。而韩国则更注重整体的氛围的搭配，通过环境的营造来提升产品的品味和档次，产品只是搭建系统中的一部分。
图素质量低是我们在设计过程中经常遇到的情况，我们通常用到最多的方法莫过于高斯模糊、柔光、滤色、添加纹理质感，将图片处理成做旧、仿古、年代感、单色……又会是什么效果呢？！
箔工艺，金银箔具有很好的延展性，将金银打展成薄膜状，与绢结合，应用于古代服饰中。此文化再京都有四百余年的历史，现在主要用于文物修复。取箔工艺品的一个局部，重新组合作为整张背景，贴片处理的文字与背景的融合更显古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情况下，采用水彩的滤镜效果，背景加入点状网格，极具形势感的箭头做引导，个性十足。
全日本剑道联合会，网站采用时间轴展示的形式，从1950－2000年每一期获胜者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差较大，所以网站设计成了古朴做旧的年代感风格，加入很多早期照片中的截图作为插画元素，确保了风格统一。
http://www.kendo.or.jp/champ/#/about
Daum是韩国最大的门户网站之一，以邮件和社区产品为核心，是韩国第一个电子邮件服务网站Hanmail的前身。牛仔蓝单色照片处理更像电影和动漫场景。
也有整体黑白加入局部彩色色的案例，将复杂图片简化处理，对于简洁的页面设计来说，这是个不错的方法。每个版块都是黑白照片做背景，文字做JS动态移入效果，在图片的某个元素上加入VI主体颜色，故事感很强。
手绘、矢量图形设计的图形场景环境，用在食品、旅游、地图、婴幼儿等方向的设计上更容易拉近消费者，给人放松愉悦的心情。相比图文混排更贴近生活。
狗粮推广网站，将网站设计成宠物乐园，各个品种的狗狗们都有自己的一段视频，内容是狗狗们对几种产品的喜好对比。
http://www.solvida.jp/solpa/#/MainPage/001
企划创意公司，技术上只是一个简单的FLASH站，但空间跨越性思维设计却给这个网站带来了不凡的效果。由局部的空间延伸出各种异空间的交汇，加入互动效果而引发的更多惊喜也进一步提升了用户参与度。
用3D拼图建造起一个小型城市，4个建筑代表网站要展示的4个心理学的具体分类，建筑物夸张的拟人化动作实现页面跳转。
http://www.soc.nara-u.ac.jp/kokoro/
日本儿童专用鸡蛋，此网站将所有产品相关内容装进鸡蛋中，食用后产生的剩余物可大变身继续用于其它物品的生产，循环利用避免环境污染，所以在首页展示上才会有类似瀑布流的大量周边产品展示。网站首页是自动向下播放展示的瀑布流效果，hover及跳转都伴随非常可爱的音乐和动态，恰当音乐的播放和触碰hover的小惊喜也会给网站增添色彩。
日本山形放送局的地区地形图，大家都看过现实版的景点手绘地图，该网站也用了这种形式。比较有意思的是他的功能非常强大，是一个可放大缩小的真实版地图，没有跳转，完整的手绘google地形图。以小青蛙作为代言人对每个景区的优势作手绘图形注解，以当前弹出的形式展示该地的历史、自然、观光、社会、祭祀、美食、传统等信息的详细图文、视频解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用动态图形化完整的对天草村进行了设计演绎，重要景点默认做了动态处理，跳转后都是另一个完整的实景矢量图。对景点中的标志性小建筑做了页面弹出实景详细讲解。
这种形式在新加坡儿童乐园的设计中也同样得到了使用。
设计风格也是体现一个国家文化的重要方式，严寒漫长的冬季成为俄罗斯的标志，在页面上打造一个同色系的冰雪世界，反而使彩色的主体信息更加突出。
一个优秀的网站它的交互性也非常重要，拥有好的交互性可以让浏览者有着更高的参与感，并且也能增大网站自身传播效果，还可以提高用户对自己的网站的依赖性和忠诚度。
Panasonic剃须刀产品JS展示站，设计形式与松下电子实现”星罗棋布的网络社会”和”与地球环境共存”的理想呼应，整站的背景都是由动线点组成的动态图形面拼合而成，图片和文字的展示停留在这星罗棋布的空间组合中。此时网站要表达的不仅是展示产品，还有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
东京交响乐团，该网站对用户的参与性做到了极致，从网站主内容上没有关于东京交响乐团的图片文字信息，用户可以在页面专属音乐键盘提示的情况下，用独创音乐的新颖形式创作属于自己的个性音乐，并对音乐逐帧做了记录，可以返回欣赏创作成果，并分享到各网站。
SPECIAL-T 绿茶网站，玩过网游的同学们都知道游戏中做任务有地图寻路功能，该网站采用了这个原理，在大海中建立类似于西游记的龙宫，用户在没有任何导视的情况下，360度无死角在海洋里自由探寻，最终的成果便是在一段时间的遨游后到达网站的终点产品引导页，阐释special的感受。
http://ogreen.special-t.com/en/
如果你想要一种优雅而直观的产品展示方式，全屏视频网站是一个不错的选择。全屏视频网站能一瞬间点燃人们的好奇心，当然也可能马上让访客失去兴趣，这都取决于你是否能够驾驭这类高大上的设计风格。
日本福祉大学，校园内外学生学习、活动氛围的场景视频作为背景播放展示，视频上一层则是手动切换的内容介绍字幕，一个大学的网站更像是一个微电影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底摄影记录展示站，整站视频展示配上海洋真实的声音。透过视频看到的海洋不是一汪死水，阳光穿透海面，碧海蓝天，比静态的照片更能展示生命的气息。
bc服装网站，暗色的动态视频做背景，与前层简单的图文排版形成反差，图片hover的3D立体效果令人耳目一新。
图片与视频的混排切换展示，拉伸后展开整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍摄的视频，用时间倒数计时的方式，记录在这一碗日清方便面泡好的3分钟内，世界各国家不同肤色年龄的人群品尝日清食品的状态缓慢特写，加入了用各国语言描述倒数计时的声音，视频中间穿插有和日清logo呼应的装饰语言，隐藏在页面下方的时间轴可以找到每一分每一秒的画面祯，时间可自行选择切换到想要的那一帧。
以上五点都是当下主流设计中另辟蹊径找创意，简单五点很难将所有好的创意都涵盖在内，除此之外大家肯定也有更好更多的想法。网页设计总是立足于浏览者的审美、文化，以及信息传播的习惯、方式，还有网页开发技术的进步。对于绝大部份网站来说，没有强大的专业力量去研究用户新的习惯和需求，也不可能开发出新的技术功能，只能在一些大型的网站中窥见一些发展的趋势，再从中找到自身可借鉴的地方。这种借鉴如果成为普遍性，那我们也很难在互联网的大潮中有自己的一席之地。网页设计已逐渐往多元化方向发展，更好的创意、更新的想法都来源于我们真实的生活感受，想要我们的网站变得更强大、拥有更好的用户体验，无可厚非，我们应该做的是大胆、大步地去尝试。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
大家好，我是 Clippp。今天为大家分享的是「菜单导航」。一个简单的汉堡菜单就可以包括多种不同的样式，可能有的样式甚至没有官方的名称，但因为样式的差异在功能上这些菜单也会出现差异性。
我们可以通过分析这些样式，来思考不同的样式代表着怎样的设计含义和设计目的，不能因为简单常见而忽视了功能的内核。
关键词：横条、多个菜单选项
这个图标的样式简洁易懂，通常位于网页和 App 的上下角，用来告知用户这个按钮之外还有更多内容可以探索。
当产品有多个菜单选项时，考虑使用汉堡图标来显示，但尽可能避免在桌面视图中使用。
关键词：垂直、内嵌菜单
通常位于屏幕或窗口的右上角或顶部，是用于打开带有附加选项的图标，打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。
关键词：水平、内嵌菜单、web
水平三点式菜单同样常位于屏幕或窗口的右上角，用于打开菜单或显示相关项的操作。
因为图标样式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
关键词：子分类、子功能
九宫格菜单通常用于打开同一产品中包含不同子产品或子功能，可以在它们之间快速切换，此图标常位于产品主页的右上角。
关键词：过滤、排序
过滤式菜单由三行不同长度的线段水平叠放而成，是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用，或者与全局过滤器结合使用。
关键词：样式特殊、时尚感更强
作为汉堡图标的替代品，与显示列表菜单的目的相同吗，但是这些样式我们平常见的可能会比较少，更常用在充满现代感、时尚感和艺术感的网站上。
不同的样式可能代表着截然不同的设计目的，常思考这些小而精的细节，是保证产品体验提升的关键。
慢来比较快，如觉得有帮助，请点个赞，谢谢！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
金刚区是什么，想必大家都有所了解。
没有的话看这张图就懂了：
图片来源：淘宝首页
我在微信上搜了一下，发现大部分讨论金刚区设计的文章，都是在讲怎么画图标。
但是我自己在使用各大 APP 的过程中，发现很多金刚区并不是那么好用，而且这跟图标好不好看无关。
金刚区设计不好，会对我的使用造成直接影响：
我今天就来总结一下，对于金刚区设计的交互/体验思考：
金刚区里有多少项比较合适？
这其实是米勒法则（Miller’s Role）的典型运用了。
如果你还不太了解米勒法则，看看下面这张图里的词语：
现在，半分钟回忆一下，你记住了多少个？
……
大部分人能记住 5~9 个。
米勒的研究发现，普通人的工作记忆（Working Memory）只有 7±2 个信息块。
如果给的信息超出了这个数字，大部分人也只能记住这么多。
所以说，金刚区里的图标数量，最好也维持在这个数，否则就是对用户的记忆能力要求过高了。
通常来，4 个图标很轻松，说 6 个图标是比较理想的，8~9 个就有点吃力了，10 个就超纲了。
例如支付宝这个就过分了，好在这只是工具类产品，复杂一点也没办法：
人们在看阅读文字时，视线轨迹是之字形：
人们在阅读表格时，视线轨迹是除草机形：
上图来源：这样设计表格，看着真难受！
虽然金刚区的眼动图我没有，但第一步肯定是从左上角开始往右扫。
所以，用户最有可能使用的图标，应该从左到右排在最上面一行，最不常用的可以排在右下角。
例如美团外卖这个设计，看着就挺合理。不但把重要内容放在第一行，而且还做了很大的视觉区分：
不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传，难免损失点易用性。
1. 仿真图标
如果追求质感，多半会使用物品本身的颜色，例如每日优鲜这个：
这种图标就没什么颜色好讨论了，注意一下整体和谐就好。
2. 数量较少
如果图标数量不多可以使用一个颜色，那么颜色上，同样没什么好讨论的。
例如 QQ 音乐：
3. 数量适中
如果图标数量在 7 个左右或以内，那么可以每种颜色的图标都来一个，这样用户也能记住大概什么颜色代表什么。
例如京东这样：
4. 数量很多
图标数量远超过 7 时，就不可能每种颜色来一个了，否则颜色都不够用了。
如果还是想要划分颜色，可以将类型作为依据，这样用户在寻找图标时会比较有方向。
当然，其实也可以简单点，干脆都一个颜色，例如联通手机营业厅：
1. 底框
一些产品为了统一感，会用圆圈或者圆角矩形，把所有图标都框起来。
这样视觉上是好处理了，但交互上很不推荐，因为会大大降低图标的识别度，乍眼一看都长一样。
这种底框在主流产品里已经很少见了，不过这么做的设计师还是不少：
这种图标数量少，有颜色区分还好，如果数量多又一个颜色，那就很难辨认了。
纵观常见的金刚区图标，通常不外乎四种样式：线条、形状、2D、3D、仿真。
联通手机营业厅
QQ 音乐
京东
美团外卖
每日优鲜
任何样式都能让用户识别和记忆，但是不同的样式给人的感官不同。
真实性越高的视觉样式，就越容易给人高级的感觉；相反真实性越低的视觉样式，越容易给人简单边界的感觉。
我发现做设计时，从不同的角度会带来截然不同的思考。
今天这篇分析，算是一个以交互体验为主，融合了一些视觉角度，希望带给大家一些灵感~
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
本文从图标类型、系统图标的尺寸和网格、图标的绘制、导出和命名等6个方面，帮你快速掌握图标设计规范。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
在内容为主的用户界面设计上，图标起到了降低理解成本、高效传递信息等举足轻重的作用。随着矢量格式与高分屏的普及，对图标字体的精细度与视觉匹配度也有了更高的要求，这对设计师来说也是一个不小的考验。本篇将介绍目前业界优秀的图标案例，并以日常图标绘制中遇到的问题，解析背后原理给出对应解法。
注：以下部分示例仅为个人处理方法，仅供参考。
本期提纲：
“SF Symbols” 是苹果为 San Francisco 系统字体设计的一套内置图标合集，每个符号图形都能与所有磅重、大小的文本进行自动对齐，达到与字体无缝结合的效果。目前已更新到 3.0 版本，根据应用界面中各种使用、展示场景，默认提供 3,200 个符号各自拥有 9 种磅重，设计师可根据官方提供的合集库直接引用到设计稿中，或使用符号模板来添加自定义图标。
1. 多种磅重
“SF Symbols” 拥有与 “San Francisco” 字体相呼应的 9 种字重，在字母参考线（字母顶线与基线）下支持 Small、Medium 和 Large 3 种显示比例，总计 27 种样式，以达到与各个字形最佳的匹配效果。
图形磅重与比例参考表
图形比例与字形排列参考
2. 字形参照定位
以字体设计方式处理图形的垂直定位，在设计图标时需要将图形中心部分放置在模板基线以上的位置，系统读取时将根据图形基线计算图形的 baselineOffsetFromBottom（基线与底边的偏移值）进行垂直定位，使图形与文本的基线一致，达到图形和文本水平视觉对齐。
图形参考线
相同基线下对齐效果，使图形重心处于小写字母区域
常用的块级元素对齐效果，重心稍微偏下
3. 多色应用
通过读取图形内的分层信息，可赋予每个分层不同的渲染模式达到更加丰富的表现形式。
不同渲染模式下的多色效果
4. 图形本地化适配
除磅重与比例以外，当图形出现需要使用文字表达含义时，针对特定语言与书写顺序 “SF Symbols” 提供了不同的适配图形，包含拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语等语言类型与 LTR/RTL（从左到右、从右到左）两种布局。
随着像 Retina 这样的高分屏与 SVG、PDF 等矢量格式在设备上普及，文字和图标在精细度与匹配度上有了更多的追求，一般应用会根据常用的字体磅重去定义默认图标的粗细，因此我们会看到一些图标出现非整数规格的情况，这对新人来说会造成一定的设计门槛。
1. 微信的图标规格
以微信客户端为例，需要在 24*24pt 的网格中默认使用 1.2pt 线条进行绘制，同时在图形自然拐角处需要保持外圆内方的样式。
2. 为什么会有设计门槛
对新手来说在 Sketch、Figma 或 Photoshop 中使用描边设计非整数规格图标可以是噩梦，即便有经验的设计师在绘制过程中也会因为计算路径余数而影响设计效率，以 Sketch 为例路径属性中虽然支持像素对齐、半像素对齐和不对齐像素三种模式，但如果需要绘制 1.2x 描边时，我们只能使用不对齐像素的模式再计算路径落点位置，因此需要不断计算落点是否处于 0.2、0.8、0.2……
Sketch 的对齐模式
3. 建议方法：倍化绘制
所以在处理非整数图标时我们不妨把画板等比放大 5 倍，可以获得一个 120*120pt 的新画板同时描边放大为 6pt，这时候我们只需要使用像素对齐模式直接进行绘制即可，同理其他数值规格我们也可以使用倍化调整，使图形在画板内变成整数，最直接方式是小数点后奇偶数进行判断，奇数放大 10 倍，偶数放大 5 倍。输出资源时如果使用 svg 这类矢量格式可根据业务需要决定是否缩放输出，而位图则根据所需尺寸进行倍数缩放再输出。
4. 工具使用差异
使用 Sketch 对图形进行倍化后绘制和调整已经友好很多了，但是其实 Sketch 中还有不少绘制效率工具是没有放在默认工具栏里的，这里可以根据需要使用自定义工具栏把这些工具外置。
Sketch 中的路径工具
Figma 相对而言路径编辑功能比较简单，但依赖社区丰富的插件也能达到对应的效果，这里推荐一些常用的矢量图形处理插件。
虽然目前 sketch 的图形绘制功能已经很完善了，但依然存在一些限制，如路径断开后无法直接重新连接，特定角度绘制效率低等问题，从而影响设计的精确度和效率。这时我们可以把目光转移到一个老牌的矢量工具上“ Adobe Illustrator ”（后面简称 AI ），AI 中的隔离模式、方向滑移延伸和自定义网格本身非常适合矢量绘图，用来绘制图标也十分便利。
Sketch 与 AI 的对比，虽不公平但也是事实……
使用 AI 的网格系统，我们可以设定符合业务需要的对齐方式、键盘增量和网络间隔，且 AI 生成的路径是支持在 Sketch 或其他矢量工具中复制粘贴的。
适配自身规格的网格设置
使用 AI 自带的角度旋转功能时设置图形副本数量，保证了每个图形角度和方向都是准确的。
使用 AI 绘制实例演示
1. 等比分布
当我们需要绘制等比放大或扩散图形时，会遇到一种情况：等边图形或圆形可以直接使用工具进行等比缩放，但长矩形或者不规则图形等比缩放后会出现部分点、线不等比，这其实是一种理解上的误区，在把不规则图形等比放大时，我们需要的是点、线距离图形中心（非图层中心，而是几何中心）做等距偏移的效果，而工具一般会按图层中心来进行缩放，可能会造成效果上的误差。
常见图形在不同处理方式上产生的差异
清楚原因与差异后，只需选择对应偏移功能即可达到理想效果，等距偏移一般矢量工具都会自带，只是就使用习惯而言没有常用等比缩放容易理解与上手。以 AI 与 Sketch 为例，都能在路径、对象菜单中找到，且 AI 额外支持偏移后拐角属性设置。
AI 与 Sketch 下通过路径偏移获得等距缩放效果
2. 骨架与输出路径
日常涉及图标绘制的需求，建议可以先使用描边进行绘制，可以理解为把路径当做图形的骨架，再利用工具的描边样式塑造磅重拐角，这样我们可以有效的保留图形最大的可塑性和调整空间。
但同时需要注意，图标在输出前需要完全转化为轮廓以及封闭路径，以保证系统渲染模式的一致，并且这是所有平台都要求的。
SF Symbols 对路径轮廓化的要求
1. 面积配比
对应不同的业务，有时会基于用户对事物的认知，直接引用该事物作为基础图形进行图标绘制。因此会出现一些稳定性弱、长宽比例相差较大或形体单薄的图形，而我们会遵循已有的标准图标栅格进行绘制，这样会导致部分特征过于明显的图形在显示面积上出现视觉误差与中心浑浊。情况类似中文字体中出现的中宫、字怀（中宫：汉字重心区域范围、字怀：笔画之间的留白范围）紧凑。
按标准栅格绘制特征明显的图形
这时可以适当把图形延伸部分进行细微的外扩处理，使图形中心部分视觉上更加舒展。
对图形延伸部分外扩微调
2. 视觉对齐
通常使用工具的对齐功能实现图形间的相对关系是合理的，但我们在处理多边形时就会遇到 “已经用工具居中了，但看起来却没居中” 这种问题，这种现象一般是由于不同多边形的面积与宽高带来的视觉差造成的。
奇怪的对齐现象
以三角形播放按钮为例，在背景范围中绘制三角形时，我们可以先添加周长与三角顶点相接的圆形辅助定位，注意这里需要使用多边形工具设置的三角形而非默认的菜单中的三角形，因为默认的三角形是等腰三角形，不能用于这种情况。
思路与等距放大类似，先确定几何中心而非图层中心
这里推荐使用多边形工具设置三角形，除了因为是等边三角形外，在 Sketch、Figma 中这类图形未扩展的情况下工具是会自动填补图层范围，且直接对齐就是居中状态。
Sketch 多边形工具创建的三角形
本文所提到的情况与处理方式仅以个人角度切入，在日常设计工作中我们所遇到的情况会更加复杂棘手，但这里也希望通过自己的发现给大家带来一些启发与探讨。
图标的绘制并不是也不应该是一个繁重的任务，只要找对方法或了解背后图形原理，大家都能在方寸之间的设计中找到不一样的精彩。
作者：We-Design
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
今年年初，我到客户现场进行需求沟通，在沟通结束后，客户问了我一个问题，我竟然不知如何回答，只在当时说了：“好的好的，我们会进行优化的。”
当时客户是这么说的：“为什么界面的图标这么普通，毫无新意，能不能设计的好看点。虽然我们是 B 端产品，但这样子的图标真的不好看。”
虽然我心里知道 B 端产品首先是以可用、易用为主的，那么图标也不例外，在评价图标设计的时候，我们首先看图标是否体现了可用与易用，是否让用户通过看图标就可以联想到这个功能是什么（合理、无歧义表达）；同时图标是否符合设计规则，让界面看起来统一与专业。若图标符合以上要素，就可以再来看图标好不好看的问题了。
不过这并不是一位客户的问题，后面我们还遇到了很多客户有类似的问题，一上来就想要视觉层面好看的图标、有创意的图标、颜色丰富的图标。
那 B 端图标设计真的只需要考虑好不好看吗？作为设计者的我们，还能做什么呢？其实，B 端图标设计是带着脚镣在跳舞，小小的图标藏着大大的智慧，下面我们一起来看看吧~
图标也叫 icon，它是对现实世界的概括、抽象、隐喻，在产品软件中，它会向我们传达功能与操作。
有些图标已经成为人人熟悉并一致认同的传播语言，例如删除、设置、男士、女士、刷新、电话、邮件，看到这些图标，人们的反应基本是一致的，无需再多说什么。
图标在 B 端界面的用途我们就不展开长篇大论说了，简单来说图标除了做点缀，还可以直接表达功能与用途。因此，我们可以将 B 端图标分为两大类：示意类图标和半装饰类图标。
1. 示意类图标
示意类图标（也有称之为功能类图标）是指可以向用户示意功能用途的抽象化图形，可以和文字配合使用，也可以单独使用。
该类图标在中后台系统的界面中会比较常用，例如基础组件、导航菜单、状态、功能性模块。示意类图标不仅以可用的方式丰富了界面效果，在一定程度上也缓解了用户的视觉疲劳（试想，全是文字的界面会怎么样）。
2. 半装饰类图标
为什么我们要取名「半装饰类图标」呢？原因在于，在 B 端界面上，不会无缘无故出现纯装饰、毫无寓意的图标，任何图标的出现即便原本是为了装饰，设计者在设计时也需要思考其含义属性。
该类图标会在中后台导航、中后台工作台、Dashboard、B 端网站等地方出现，它们可以让 B 端界面活跃起来。
我们可以发现，某些场景下使用示意类图标会更好（比如基础组件），某些场景下使用半装饰类图标会更好（比如 B 端网站），某些场景下使用任意一类图标都可以（比如中后台导航菜单）。
回到一开始客户的问题：把图标设计的好看点，他说了好几个地方，记得好像有树控件 、导航菜单、按钮等。设计者们需看看目前客户讲的场景是哪个，有些场景不适合亮丽的图标，这会喧宾夺主，例如基础组件中。
我们深刻了解 B 端图标类型的使用场景，在设计决策时会更加得心应手。
虽然示意类图标和半装饰类图标视觉形式不同，但在绘制上的规则是互通的。我们团队输出了一套企业级 B 端图标设计规范，不仅可以帮助新人设计师快速上手，并且可以使团队内设计师高效协作，保证设计结果的一致性。接下来和大家分享下思路，这是一套可复用的方法。
1. 约定图标绘制区域
我们需要给一整套图标约定合适的绘制区域，保证不论哪位设计师输出的图标，均符合设计标准。并且原始图标大小一致，可以保证前端使用也非常友好。
假如都是 48px*48px 区域绘制的图标，它们均缩放到 16px*16px 即可；如果一个是在 48px*48px 画板上绘制的，一个是在 88px*88px 画板上绘制的，它们都缩小到 16px*16px，会导致图标看起来视觉不一致。若期望它们看起来一致，就需要专门为不同画板的图标设计绘制规则。
这里在和大家分享一个小心得：我们团队在约定图标绘制区域时，发现了一个问题。Antd 的图标是绘制在 1024px*1024px 画板上的，但又有一些团队是绘制在 16px*16px，到底应该选取哪种画板呢？经过实际操作后我们发现，画板越大，设计细节可以越丰富。但缩小到小尺寸时，会有小数点的虚边（不过不妨碍前端应用，用户也看不到虚边）。而小尺寸画板绘制图标，画板全在视线范围内，设计师绘制图标时更有安全感。所以，不论用什么尺寸的画板，只要团队成员一致认同即可，不用过于纠结。
2. 设置出血位
除了要让图标绘制到统一的画板中，我们还约定了出血位，要求所有图标均保留出血位（出血位默认使用固定值），出血位起到的作用是：防止设计师图标绘制不小心贴边后，图标在实际应用场景中会出现缺失现象。当然，出血位的默认数值并不是一成不变的，允许设计师在绘制一些特殊形状的图标时，有调整空间，保证视觉平衡。
3. 约定元素调整规则
针对示意类图标：
线条：我们会要求设计师在绘制图标的线条/圆点时默认使用某个数值，然后设定线条粗细/圆点大小的递增或递减规律，例如以 2 的倍数为主基调绘制，默认为 6px 粗细/6px 大小。但允许设计师在绘制图标时，不合适用默认数值的，就按照增减规律去指导设计，如下所示。
圆角：图标采用何种内外圆角设计会影响图标给人的感觉，数值大的圆角会让用户感觉亲切；数值小的圆角会让用户感觉硬朗、专业。采用哪种圆角方式，设计师可以参考产品调性去规定。
针对半装饰类图标：
半装饰类图标在设计上也不是随意为之，除了要可以表达文案内涵外，假如是一整套的图标系列也需要约定元素调整的规则。
例如约定在「几何图形+业务图形」的设计基础上进行发挥，保证图标放到一起具有很强的一致性。并且半装饰类图标还要设定色彩范围（主色、辅色），如此可以让界面色彩不杂乱，严谨有序。可以看到腾讯云官网的图标采用了类似的设计方法。
4. 分层打造秩序
对于图标画板来说，它不是一个平面，它就像楼房一样，是分层的。从底层到最上层的内容依次为：主画板区域、核心内容绘制区域、基础图形参考区域、实际图标。
5. 从基础型拓展
我们在设计图标时，都应该先从基础型开始思考——圆形、矩形、三角形、正方形等，保证设计构图上的节奏感和规整性。当基础型无法满足需要的时，以它们为准向外散发，在遵循设计规范的基础上，做视觉上的平衡和微调。
如果是落到实际软件中应用的，建议所有图标最后都要合并路径，保证图形规整和干净，同时便于正确输出和使用。
在「2.1、约定图标绘制区域」中，我们说到了要为一套图标约定统一的画板区域，但这个事情给设计师造成了困扰，还不止一位设计师问我：“那是不是我不能再用其他尺寸的画板来设计图标了。”答案当然是否定的。约定画板尺寸不是约束，恰恰是在规则中给予了设计师有序拓展的能力。
假如不约定画板尺寸，那么设计师直接放飞，每个图标都有自己的尺寸，并且有些还会出现长方形的形态。毕竟每个人的工作习惯不同、面对的产品不同，直接打开软件画图标是最快的方式。
而首先约定画板尺寸，设计师就会有条理地进行绘制，在遇到特殊情况时进行有序拓展，我们可以称之为场景拓展法。例如设计师可以为 B 端基础组件、工作台常用导航模块、结果页的图标各自设计一套绘制尺寸。
那设计师要怎么判断什么时候采用场景拓展法去设计呢？我们可以优先使用默认画板尺寸设计图标，在遇到特殊场景不允许情况下，采用场景拓展法去执行，针对界面风格有场景区别的，可以规定几类画板尺寸，为不同场景使用。
线型图标与面型图标也是设计师经常在讨论的话题，他们常常讨论「什么情况下使用线型图标，什么情况下使用面型图标」。做过比较多 B 端产品的小伙伴可以发现，没有说哪种场景必须使用线型图标，哪种场景必须使用面型图标，主要还是看当前产品调性合适哪种，并且使用某类型图标后，对界面产生的效果是什么。
例如当界面图标较多时，采用面型图标，会显得页面很重，会把用户视觉引导到图标而不是重点数据上。
线型图标与面型图标在界面中使用，是一项系统工程，是由多方因素决定的。但我们设计师需要保证 B 端界面图标使用的统一性，即便按照场景区分，也需要认真思考，是不是有必要。就如界面字号使用定律一样，建议不要超过 3 种，多了会让界面杂乱，降低界面设计品质。图标也是如此，不论面型还是线型，要站在产品角度去整体把握，而非线型和面型的简单选择。很多 B 端产品是两种类型混用的，但它们很好的划分了使用场景。
这里我总结了一些线型图标与面型图标常用的场景（以 B 端中后台为例，但这并不是唯一选择）：
1. 在导航上（菜单极其多），常见默认用线型，选中用面型。
2. 在导航上（菜单很少，单层），粗一些的线型图标或者面型图标都会用，且会比较个性化，以提升产品整体调性。
3. 在基础组件中，通常使用线型图标，且颜色浅，用户可以把注意力聚焦在信息本身。
4. 在表格数据的状态中，面型和线型是均分使用的状态出现。
5. 在文字按钮中如果要添加图标，让界面展现更丰富，线型按钮居多。假如一旦按钮很多，面型图标会让界面显得太重。
6. 若标题区要出现按钮，面型按钮会使得区块显得更整体。
这里还想和大家说说「视觉尺寸与规范尺寸」的事情。之前遇到设计师这么问：“既然已经约定了图标的设计规范，那是不是就严格按照规范区间来（严格按照基础图形参考区域来），但是有些图标不适合直接套用规范啊。”
是的，其实很多不规则图标是不适合直接套用规范的，就像一份周报格式不是所有岗位都适用一样。如果设计师发现有些图标直接套用规范不可行，是可以根据「视觉大小一致性」进行微调的。这不仅保证了前端开发的便捷，也保证了界面视觉的整洁。
既然是一套 B 端产品层/企业级图标库，那么必须要有规范的命名方式，这样会方便设计师之间的协同，也会更方便开发与设计之间的协作，同时查找效率会提升。
那么命名有什么规律呢？其实只要根据项目的情况，团队内有统一的认知即可。关于命名的中英文，也是视团队而定，各有优缺点。比如是英文，那会方便开发直接用名字，不用重新取名（当然设计师取的英文名开发不喜欢，也会改）；用中文的话，方便检索。
可以是：
尺寸/类型/图标名称/状态
16px/导航/上传/默认
形态/格式/图标名称
面型/方型/新增
模块/图标名称/状态
导航/分享/正常
好用的三方图标库还是很多的，虽然图标库质量参差不齐，但还是在一定程度上解放了设计师天天画图标的痛苦。这里介绍几个图标质量不错的网站：
1. Noun Project
网站链接：https://thenounproject.com
2. Iconfont
3. ICONS8
网站链接：https://icons8.com
4. Font Awesome
网站链接：https://fontawesome.dashgame.com/
5. IconPark
网站链接：https://iconpark.oceanengine.com/home
当客户提出图标好不好看时，是一个正常人的反应，试着想想我们自己，不也总是会很表面得看待一件事情么。因此，客户不会知道原来一个小小的图标也是藏着大大智慧的。不过没关系，当我们了解了小图标内部的大智慧后，我们可以更轻松的驾驭图标了，也可以知道在何种场景下，使用何种图标可以提升界面展示效果，得到客户的好评。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
最近我在学习使用 Figma，会在社区查找一些大厂的设计系统文件学习，看到一篇微软 Fluent 系统图标规范文档，还挺详细的。其中，我发现有些小点自己平时很少注意到，并且感觉对设计师定义图标规范也有一定的帮助，所以结合个人图标经验挑选部分内容来翻译成一篇文章，便于扩展自己的图标思维。（备注：以下的规范是针对尺寸 24px、线条粗细 1.5px 的图标）
在前一个版本，Fluent 系统图标采用了 MDL2 和 Monoline 图标集合，比较大的特征是直角、方方正正的形状。不过随着 Win 11 系统的发布，我们可以看到 Fluent 系统图标也进行了比较大版本的优化，感知最大的地方就是图标变圆润了。
设计理念有三个准则：熟悉的、友好的、现代的。图标形状遵循了用户熟悉的基本原则，示意上识别清晰，尽量远离隐喻含义。同时，细节处理更友好，采用了圆角和简洁的形状，并有两个主题：线性和填充。
规范化的网格，能促进图标的整体性和统一性，设计师绘制图形元素时也更有条理性。从 24px 图标尺寸开始，比较建议使用网格系统，内容安全区域是 20px，周围有 2px 的内边距。（留内边距主要是考虑个别图标居中分布和体量问题，有些图标元素会超出安全区域，比如修饰符类型图形）
基础形状是网格的基础，正方形、圆形、纵向矩形、水平矩形采用定义好的模板尺寸，在相关图标体量上保持一致的视觉比例。
圆形、矩形、正方形图标体量效果如下。（矩形体量看起来有点偏小，这种问题受限于图标尺寸空间小）
图标线条应当采用一致的粗细，线条末端采用全圆角。
像素对齐很重要，特别是低分屏设备，图标可以看起来很清晰。由于线条粗细是 1.5px，需要保证 1px 是对齐像素的，避免内外都出现虚边。
但在某些特殊场景，为了使图标体量居中分布，就会出现像素不对齐的情况，比如一条竖线。
Fluent 图标改动点较大的可以说是圆角了，传递了更柔和、更友好的体验感受。因此，我们认真打磨圆角的细节，定义了三种圆角数值。大圆角使用在线条直角或钝角处；当使用大圆角感觉形状太圆难以辨别时，我们可以使用中圆角；小圆角用于很小的细节或锐角处。（确实挺细的，也影响了整体的风格。如果追求统一大圆角的话，可能太偏圆润风格，更适合娱乐类产品用户吧）
断口多存在复合图标上，断口间距是 1px。当图形角度堆叠时，圆角中心点需要一致，即外层图形圆角会稍大一点，使线条平滑过渡。（看起来确实挺和谐的）
修改符应当谨慎使用，因为它对于一部分用户来说很难阅读。由于尺寸较小，修饰符元素要尽可能地简洁，常放于图标的右下角。设计师在绘制过程中，修饰符图形可以超出安全区域，使图标视觉感官居中分布。
如果已经建立的图标需要关闭状态，应当遵循模板：斜杠从左上角到右下角 45 度，撑满图标的安全区域。
图标平衡很重要，我们也有测试的两种方法。第一种方法是画一个圆圈，帮助我们更好地感知平衡性。第二种方法是视觉重量测试 ，通过模糊来感知图标的区域面积，从而达到平衡的目的。
随着更多图标的创建，我们必须非常有意识地命名，并尽可能地具有前瞻性，后续才能更好地协作。我们推荐图标命名使用形状的明喻，比如盾牌代替安全，星号代表收藏。
以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧，线条粗细、圆角、居中、体量、平衡、命名等方面还挺多细节可以打磨细化的，希望各位设计师能够结合业务来仔细琢磨，提炼出属于自己产品的图标规范。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。
图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。
基本原理：修改 SVG 的样式，生成不同风格的图标
用处一：颜色适配
这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。
相同功能需要两套不同主题色的图标
用处二：皮肤适配
现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。
通过修改映射配置，可以得到不同颜色的图标
我们先看看图标套色之后的效果：
修改映射配置，可以得到线、面不同风格的图标
简单来说，实现这种效果有下方五个步骤:
套色方法五个步骤
以下方几个图标来做示例：
SVG 示例图标
第一步，确定图标线、面风格
设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。
同时兼容线、面两种风格效果
第二步，定义图标颜色
在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。
根据线、面风格需要，定义图标的颜色
第三步，给颜色定义样式名
给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。
给颜色定义样式名
第四步，给 SVG 图标添加 CSS 内部样式
SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。
给 SVG 添加 CSS 样式
第五步，样式属性配置机制
添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。
修改配置代码即可改变图标颜色
完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。
了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：
案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。
套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。
不同主题色图标的变换效果
案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。
套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。
不同风格图标的变换效果
案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。
套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。
深浅色模式下图标的变换效果
通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：
1. 时间和维护成本的降低
利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；
2. 个性化需求的满足
后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；
3. 服务器资源的节约
更少图标资源，更小压缩包，更少空间和宽带的占用。
采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。
工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
编者按：其实网页或者App中的导航（Navigation）这个概念远不止我们熟悉的导航栏，而是一个更加广的交互概念：引导用户和产品进行有效的交互，实现用户的目标。本文将详细地介绍界面的导航设计。
一个网页或App产品要想有很好的可用性（usability），需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者App的时候找不到自己的处在什么位置或者该怎么去到想要的页面，那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。
首先，让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中，当我们从一个地方到另一个地方，需要一些引导和指示。英文中Navigation这个词来源于拉丁文，原意就是：操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。
所以回到UX／UI设计上，导航毫无疑问是可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动并且实现他们目标的动作组合或者技巧组合。 用户带着他们的期望和目标来使用你的网站或者产品，作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效，用户体验能得到极大的提升。
在你刚开始设计你的界面时，就要思考怎么设计一个有效的无缝衔接的导航。通过一些可交互的元素，比如按钮（buttons），开关（switches），链接（links），标签（tabs），条（bas），菜单（menus），区域（fields），让用户在不同的界面之间进行切换。
我们工作室的设计思路是，在界面设计的早期就全面地思考导航的设计，包括界面的布局，页面间如何切换，导航元素的放置和具体功能。并且通过低保真原型来进行验证，保证用户能清楚地理解所有重要的操作。如果跳过这一步，设计将有巨大的风险，其他事情有可能到头来都白干了。所以无论，对用户还是客户还是设计团队来讲，做好这最基础的部分是非常有好处的。
菜单是我们最熟悉的具备导航功能的元素，它向用户展示了界面的所有重要选项。基本上，它可以是用动词命名的一系列指令，用户可以用它来指示系统做出动作，像保存，删除等；它也可以是一个用名词命名的目录，用来代表不同内容的集合。
在界面设计中菜单可以放在不同的位置（侧边菜单，顶部菜单，底部菜单等），拥有不同的交互和视觉形式（下拉菜单，上拉菜单，滑动菜单等）。要想设计好菜单的位置、交互和视觉形式，设计师需要经过全面的用户调查，包括目标用户的预期和要求、接受能力和使用情境。好的菜单设计能让用户更快地实现他们的目标，为用户体验打下坚实的基础。
△ 作者：Tubik
这是一个博客APP的界面设计，采用了侧边菜单以及目录的形式，文字直接说明内容，再加上图标来做为辅助的视觉说明。
△ 作者：Ludmila Shevchenko
这个UI概念设计的例子很好的运用了颜色作为标记，这是一种很有效的导航技巧：每个分类的背景色使用了和目录相同的的颜色，这样目录和内容有着非常强的相关性，用户能自然地将他们联系起来。
CTA是用户行为召唤的简称（call to action）。CTA简单来说就是指设计师通过设计，刺激用户去做出一些行动。相应的，CTA元素就是指那些能刺激用户做出行动的交互元素。典型的CTA元素是按钮，标签或者链接。
不管在什么界面，CTA元素都是高效的交互行为的核心，极大的关系到产品的可用性和导航有效性。如果CTA元素的设计不到位的话，用户会产生困惑并且得费劲地去尝试。产品的转化率和用户体验都会大打折扣。这就是为什么CTA元素特别值得注意。无论什么样的界面，它都必须是最瞩目的元素之一，用来直接地告诉用户怎么用这个产品。
△ 作者：Eugene Cameel
一些CTA元素直接用图标形式而没有任何文字说明，但只适用于大家都熟知其含义的图标，比如听筒图标和信封图标。上图这个例子中，这个听筒图标就是这个界面中一个焦点，是一个典型的CTA元素，引导用户快速地实现他们的目标。不需要任何文字说明，用户也能懂点击这个图标的结果。
但是，如果一个图标的含义不是那么明显或者可能造成误解，最好还是加上文字说明。
△ 作者：Tania Bashkatova
上面这个例子是一个关于制作海鲜的网站的着陆页（Landing page）。页面的标题let’s cook还有食材照片是一个CTA，但不是一个可交互的CTA。可交互的CTA是下面这个红色按钮，用户点击这个按钮能看到更多关于不同主题和菜谱的信息。 抓人眼球的颜色强调了页面的视觉层级关系，把用户的注意力拉到关键的交互区域中。
条（Bar）指的是界面中一组用户可以点击的元素，用来快速与产品进行互动，或者还能让用户知道事件的进程。
标签条（Bar）
最基本的条是标签条（Tab bars），常出现在APP界面的底部，让用户能在APP的不同模块间快速切换。
△ 作者：Sergey Valiukh
载入条（Loading bar）
载入条是用来告知某个动作的进展，用户可以通过时间、百分比或者其他信息了解整个过程。
△ 作者：Sergey Valiukh
进度条（Progress bar）
给用户提供反馈，让他们了解事件的进度，比如说计划的事情完成了多少。
△ 作者：Valentyn Khenkin
按钮应该是用得最多的元素了。按钮能让用户在对系统发出指令后得到恰当的反馈。用户通过按钮对系统下命令，跟系统进行交互从而实现他们某个目标，比如发送邮件，买一个东西，下载文件，播放音乐等等这样的指令。按钮之所以那么的常用和对用户那么友好，是因为按钮很好地模仿了人和真实世界里跟物品的交互。
现如今的UI按钮有不计其数的设计样式，能满足很多的设计需求。按钮典型的用途是表明这个地方是可点击，因此需要具有非常高的视觉识别，有着特定的形状还有文字说明它能实现什么动作。设计师通常需要花不少时间好好考虑怎么让按钮很好地融合界面的风格，同时又能在视觉上跳脱出来。
△ 作者：Ernest Asanov
以下是在APP和网页设计中常用的几种具备附加功能的按钮。
汉堡按钮
汉堡按钮隐藏着一个菜单。当用户点击他们的时候，能把菜单调出来。有这个名字是因为它是由三条水平线组成的，看起来就像是汉堡的形式。它是一个典型的交互元素，也是颇具争议的元素。
大多数用户知道点击这个按钮能展开一个菜单，所以不需要额外的说明。汉堡菜单极大地节省了界面的空间，能让界面看起来更简洁，也为其他重要的界面元素腾出了必要的空间。它同时非常适合响应式设计，通过隐藏菜单让整个设计更统一，界面能在不同设备间保持一致。尽管它因为一些缺点而饱受争议，但因为这极大的好处，它目前仍然被广泛的使用。关于这个元素的主要诟病是，对于一些对界面不太熟悉的用户来说，这个比较抽象的设计元素可能会让他们产生困惑。所以，在决定使用汉堡菜单前，应该调查一下目标用户的接受程度和他们的需求。
△ 作者：Ernest Asanov
上图这个概念设计就是用了汉堡按钮把菜单隐藏了起来，从而实现一个简洁的页面布局和视觉效果。
加号按钮（Plus button）
一般通过这个按钮，用户可以实现添加某个内容的动作，比如添加新的联系人，状态，笔记，位置等所有用户在产品里能做的基本动作。有时候，点击这个按钮会出现新的窗口。有时候还会出现一些选项供用户进行选择添加什么内容，这取决于是什么产品。
△ 作者：Sergey Valiukh
上面这个例子就是用户在点击加号按钮后出现了可以选择添加的内容（图片，视频，文字），在选择了之后才会弹出添加内容的窗口。尽管这个操作可能增加一些额外的交互动作，但因为给予了用户选择空间，所以还是对用户很友好的一种设计。
分享按钮（Share Button）
分享按钮顾名思义就是能让用户把内容分享到他们的社交平台账号上。大多数情况下，这个按钮都是用社交平台的Logo作为视觉形象，这样非常易于识别和认知。
同样，这也是一个用户非常好理解的元素，在界面中用得也非常多。因为它很好地模仿了现实世界里人们熟悉的开关概念。关于这个元素的设计，特别要注意的是开和关的状态在视觉上要差别非常明显。这样能避免用户花时间去研究怎样是开怎样是关。很多种的形式对比或者切换动画都可以解决这个问题，从而设计出很好的用户体验。
△ 来源：Tubikstudio
这个案例是来自一款闹钟应用Toonie。动画效果让交互变得更流畅和自然，同时整个控件颜色的改变和滑动元素形态的变化让用户能够轻易地识别出开关的状态。如果你想了解整个App的案例研究，可以到来源查看。
也很好理解，就是让用户在一些选项里选出目标选项。通常包含一个可滑动的列表，上面是一列数值，比如小时，分钟，日期，度量，币种等等。通过滑动列表，用户可以选定想要的数值。这个元素广泛地应用在有时间设定这个功能的界面设计上。
△ 来源：Tubikstudio
复选框是可以用来同时标记多个特定的内容。同样的，也是借用了我们在现实世界里熟悉的概念。我们在考试的时候，或者填调查问卷的时候会在选项前的小方框里涂上颜色作为选中的标记。和开关一样，复选框同样用得很多，主要在设置页面设计里。不过，复选框还有另外一个用得比较多的地方，那就是含有任务管理，待办事项，时间记录等类似功能的App或者网页。
△ 作者：Tubik
上面这个是一个待办事项App的概念设计。用户点击复选框后，表示这个内容已经完成。字体变粗的同时颜色发生了改变，这样就非常明显地把这个已完成的任务和其他未完成的任务区分开来。
界面的导航（Navigation）是用户体验设计的核心之一。毫无疑问，如果你看不到路, 你就去不了你的目的地。用户现在正面对着越来越多的网站和APP产品。越来越多的选择会让用户期望这些产品具备符合他们使用习惯的导航设计。
图标可以定义为一个象征着某个概念或物体的视觉形象，有着加强与受众沟通的目的。会和文字结合一起使用，将想要传达给受众的信息表现出来。在界面设计中，图标通常是象形符号或表意文字，对可用性和成功的人机交互有重要意义 。
毫无疑问，图标的其中一个重要作用是可以有效地替代文字描述。因为比起文字，用户对图片的理解速度更快，所以这个特点能极大提升用户体验，增强产品的导航和对用户的引导。但是，需要注意，即使是轻微的歧义或者误解都会导致糟糕的用户体验。所以在设计图标的时候要做必要的测试，根据目标用户平衡好文字和图标的使用。最有效的方式是同时使用图标和文字，这样大部分用户都不会有问题。电商APP或者网站最常使用这样的形式来给用户足够的信息，让他们能轻松快速地浏览。
△ 作者：Tubik
根据图标的功能，我们可以将它们分为一下几类：
交互式图标（interactive icons）
这类图标具备交互功能。他们是可点击的，能回应用户的要求，触发图标代表的动作。这种图标告知用户按钮、控件或者其他界面交互元素的功能或者特点。在大多数情况下，这类图标的意义明确，不需要文字辅助说明。
△ Tab Bar
△ 菜单概念设计
说明性图标（clarifying icons）
起到说明作用的图标，设计师用它来表示某一个特点或者内容的种类。它有时候不属于界面布局的元素或者并不具备直接的交互功能。经常和文字结合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娱乐性和装饰性图标（entertaining and decorative icons）
这类图标注重抓人眼球的视觉效果并非功能，通常用在节日或者特别款的场景。他们能有效地吸引用户的注意力，增强视觉冲击力。
复活节和春天主题的图标：
△ 图片作者：Arthur Avakyan
APP图标（app icons）
在各个平台上可交互的品牌标志，展示品牌和产品的形象。最常见的就是我们手机界面上每一个App的图标，上面通常是品牌和产品的Logo。
△ 作者：Arthur Avakyan
网页图标（favicons）
就是我们经常在网址栏或者书签里看到的URL前面的那个小图标，也是代表着产品或者品牌的形象。能让用户在浏览网页时给他们快速的视觉提示。
搜索区域又常常被称作搜索框（search box）或者搜索条（search bar），代表着用户可以在这个区域内输入想要搜索的内容。它是那些有着很多内容的网站或APP的核心导航元素，像博客，电商，新闻等产品。设计得好的搜索框能让用户轻松地找到想要的信息。因为它能帮助用户省去很多时间和精力，所以它是一个对用户特别友好的界面元素。
它的设计形式有很多种，可以是标签的形态，也可以是引导输入的一条线或者简单的一个搜索图标。大多数情况下搜索框的图标是一个放大镜的样式。基本上所有的用户都懂得这个图标的含义，所以能实现非常直观的导航设计。想要在这个图标上做文章的话，要好好测试一下，因为改得不好的话会严重影响交互和界面的可用性。搜索框还可以加入提供候选项的下拉菜单或者自动填补内容的功能。
△ 作者：Ernest Asanov
另外需要注意的一点是搜索框控件在界面中的位置。在网页设计中，搜索框经常出现在网页的顶部。这是一个很恰当的设计，因为通常网页的顶部区域具有很高的可见性，用户打开网页就看到了，不需要再花时间去找到这个控件。举个反面例子，如果一个电商网站因为搜索框的设计有问题，导致用户没办法快速方便地找到想买的东西，网站销售表现会受到极大的影响。因为现在很多网站都将搜索框放在网页的顶部，所以用户也养成了在那里找到搜索框的习惯。
至于App界面的话，要视具体情况而定，设计师可能面临更多的限制。如果是一个有着大量内容的APP，而且搜索是核心功能之一的话，那么一般放在一个显眼的标签条（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜单里或者只在需要的用到的地方显示或者时刻显示出来。
△ 作者：Sergey Valiukh
标签是一个标有关键词的可交互元素。标签其实是给用户提供快速通道的元数据，用户可以通过它快速导航到与关键词相关的所有内容。除了网页或者App本身带有的标签，在很多情况下用户也可以自己创建标签。
△ 作者：Design4users
标签这个界面元素被广泛地应用在用户原创内容平台（UGC）的界面设计里。当用户上传图片、状态到社交网络的时候，可以加上关键词作为标签。上图就展示博客网站Design4Users运用了标签来加强网站的内容导航。通过点击某个标签，能切换到带着这个标签的所有内容的页面。标签是友好的搜索引擎优化（SEO-friendly）技巧，能提高用户搜索内容的成功率。
△ 作者：Unsplash
再举一个例子，上图是图片素材网站Unsplash的界面。当用户想要下载图片时，可以输入描述图片的关键词作为标签。通过这样的形式帮助用户有效地找到想要的图片。我们还可以注意到，输入框内加入了引导用户进行操作的说明，这样更进一步地提高了产品的可用性。设计的细节真的很重要。总而言之，标签是一种用户可以自行创造的导航元素，拉近了界面和目标用户之间的距离。
全面地设计好整个界面的导航不是一件容易的事，需要一些心理学、交互模式、用户测试的基础知识，还需要在项目的早期思考清楚网站或者App的信息架构。但是做好这一点的话，能够让你的产品很好地帮助用户解决他们的问题，给优秀的用户体验打下坚实的基础，让他们对你的产品产生越来越大的粘性。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
蓝蓝设计的小编 http://www.lanlanwork.com
