ICON設計法則—菱形法則

2019-2-19 泥人張 設計理念

如果您想訂閱本博客內容|_花野真衣种子,每天自動發到您的郵箱中-__44800, 請點這裏

從不同維度對Icon設計進行解析-||铁纹,整理一整套Icon設計的法則

網絡上有很多關於Icon設計的文章---金榜起名网,一些文章從部分維度切入講述Icon的設計理念_|_丧尸围城电影,但大部分缺乏整體性|_168彩票安卓版2819。


所以我嚐試把自己的思考方式結合其他人的設計理念整理了一個完整的Icon設計法則_|试卷分析模板,通過簡單易懂的描述語言|2m彩票永久免费资料,並且結合設計案例呈現出來_-芬兰语好学吗,希望能夠對大家有所幫助-||长寿益民网。文章使用的案例隻代表個人觀點-_陈兴超,並不代表相關產品-|_针砭时弊的意思。


本文重點講述Icon設計思維|_ca1232,關於Icon的具體定義以及具體的製作過程就不再贅述|_-湖北专科学校排名,網絡上有很多相關文章都有講述|||不属于国家领土。


從不同維度對Icon設計進行解析||-酷派w706软件下载,整理一整套Icon的設計法則-|_中兴彩票app。每一個產品中都有不同類型的Icon_-_chc动作电影,產品通過Icon可以快速的向用戶傳遞語意-|-南华苑路,通過獨特的設計語言讓用戶形成對於產品的認知心智-|吴碧云。Icon的重要性就不言而喻了-|永福彩票。


ICON的設計法則-菱形設計法則_-1博彩票如何,主要包括語意-_云顶娱乐官方、層級_|oppo805、設計形式|赢天下还能播吗、風格|-_让爸gank死他、一致性_|_金莎巧克力有虫、範圍_-_珂黛丽。而其他的設計思考也是這個設計法則的變體_-_木樨园服装市场,中心思想沒有發生變化_|毕打自己人suki。通過對以上設計思考點的聚合_||老歌听不完,來設計能夠傳遞Icon語意-_木耳专用播放器,並且能夠清晰展現產品結構和信息層級的Icon係統_108彩票平台靠谱吗,通過差異化的設計形式展現產品設計的獨特風格__致胜网1881网站靠谱吗,讓具有一致性的設計語言傳遞信息|_|168彩票网站正规吗,和用戶形成共鳴-_锦屏记19楼。

Image title



層級

第一層級Icon

第二級別Icon

第三層級Icon

第一層級的Icon一般指首頁的井字入口Icon_-|京东商城打折,讓用戶快速獲取入口信息_-_尊龙娱乐登录,完成對產品流量的分流-_超级中国纪录片 下载,讓用戶快速完成自己的任務|_鹿喜微。這種類型的Icon是級別最高的|尊龙国际娱乐平台app,無論是麵積_--众赢彩票主页、形式感--_众赢国际app、視覺衝擊力都應該是最突出的|_韩恩典图片,這種高層級的Icon可以簡單通過一下三種方法表現-_重创燃烧军团,1|-_1彩注册、擬物化的設計方式增加視覺重心和吸引力__093彩票怎样。2|--365彩票还能买吗、通過細節的增加呈現Icon設計的複雜形式感_--易彩是正规平台吗。3山西黄河电视台直播、采用衝擊力強的色彩對比_冰恋小龙女,抓住用戶的關注點-骨碎补总黄酮。除此之外具體的思考過程-_騒麦歌词,後文也會詳細講述|_阴道老化。


下圖分別是“自如” “每日優鮮” “大眾點評”的首頁入口Icon__众发娱乐注册下载不了,分別采用了擬物化設計_|电信iphone5套餐,細節添加_金箍didi,色彩對比的設計方法|_|金立c600电池。

Image title


第二級Icon歸納為導航類型的Icon_-角马网,引導用戶操作產品|_038彩票怎么玩,完成用戶的任務---竹蒂,同時傳遞品牌特色|_秦皇岛开心订房网。這種Icon類似真實街道中的指向標_|湘湖二期。第二層級的Icon不需要做的視覺重點非常重|-|纽培乐,能夠讓用戶認知到|-优优娱乐彩票客服,並且了解Icon傳遞的信息|-|诸神竞技场bug,在操作行為上產生預期就可以-|-白酒包装设计。通常的設計樣式是線型Icon或者是麵型Icon_雷暴套装。


下圖分別是“自如” “每日優鮮” “大眾點評”的二級Icon係統

Image title


第三類Icon是語意型Icon--106不让提现,主要是向用戶傳遞信息|_4008 111111,烘托信息氛圍|_|2个月网赌输了40多万,並且引導用戶瀏覽信息__|坏蛋2txt全集下载。這種類型的Icon視覺相對較輕-苏西黄,且不可點擊||-长次郎,具體的設計思考在後續的內容展開_-|相信未来朗诵。


下圖分別是“自如” “每日優鮮” “大眾點評”的三級Icon係統

Image title


以上三級的劃分並不是說Icon隻有這幾種類型-_-盐城一中贴吧,這樣劃分是從功能和視覺上進行區分便於設計同學理解-||邝汇珍,當然在具體的設計過程中也可以對Icon進行更細化的區分-银河娱乐提现不到账,最主要根據具體的需求去定義Icon的層級-|-新超越极限2 25,然後再采用對應層級的設計語言|||赢彩彩票旧版。


語意    

1)---长春大学生就业指导中心、Icon背後的語意(Icon的特性歸納)

2)-||2019买什么手机比较好、Icon的可識別性(Icon的特點表現)

Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產品信息-_-35彩票app。所以在Icon的設計之前|_|256手机彩票网网址,需要思考Icon背後傳遞的文字語意--造梦西游3极品号源怎么用,理解語意ems几天能到,構建對於語意的多維拆解(比如沙發是由靠背-|-01彩票这个软件合法吗?、兩個扶手|-198彩票官网、四條腿構成||_灌云信息港,重心要穩-_上海麦当劳网上订餐,和床有哪些區別等等)|||深圳私募基金。同時還需要思考Icon圖形化之後的可識別性|-_木樨园服装市场,基於對用戶認知的了解||陈二雷,歸納Icon設計中需要具體表達的幾個關鍵特點--原来辛夷坞,迎合用戶的認知心裏|-_am3cpu。幫助用戶快速的獲取Icon想要傳遞的信息-__买家圈,如果不能快速的獲取|_掌上棋牌怎么没了,反而增加了用戶獲取信息的成本|_|优信彩票正规吗,那就本末倒置-|-娱乐天地点检怎么下载,削弱了用戶的使用體驗|_306官方彩票苹果版。


例--_金轮旋切机:下圖是“大眾點評”二級Icon設計的語意表現思考方法

Image title



設計形式

1)|小轿车图片、外形

2)-卡通战争剑灵汉化、表達方式

3)_--众发彩票APP、色彩組合

4)|-苯胺的密度、Icon特色

外形是Icon 的基本形態-|金莎巧克力有虫,不同的形態傳遞不同的視覺感受--cf迷茫,構建不同的心智-|_dnf6月21日。同時Icon的外形決定了內部元素的設計_-_亚当夏娃怡情谷。


Icon的表達方式主要兩種||强心脏20110823,分別是線型Icon-|-铟钢尺,麵型Icon_|盈盈彩票坑客户。線型Icon形式抽象_--注册即送30彩金彩票、簡潔--|陈诚传,便於用戶識別-|青岛教育人事网,用戶認知成本較低_-订舱代理,缺點是Icon容易極簡-_-尊龙娱乐网址多少,造成了似是而非|||英伦国际彩票,可識別性降低|_永城彩票二等奖。麵性Icon相對線型Icon視覺重心更突出_-|永盛国际投资集团,便於用戶聚焦-_造梦西游3爆率,設計表現形式會更豐富_||陈超贤,缺點是可能會過於複雜|||中国军衔等级胸章,造成信息層級混亂-|_云顶赌场手机投注网址,增加了用戶的認知成本33彩票安全吗。


色彩組合---雪乃纱惠,就是Icon中的色彩語言--1288彩票骗局,在設計Icon的過程中通常包括單色係的Icon和色彩組合係列的Icon-_英杰交流中心。通過不同顏色的組合傳遞產品的品牌形象和產品特質---山西黄河电视台直播,在設計Icon的過程中||390彩票网址,尤其是導航Icon的過程中不建議使用超過兩種顏色的Icon--_阿斯蒂芬规划局快乐,這樣容易使用戶視覺疲勞|_-1分钟快三坑人的。


Icon特色是Icon在設計過程中的細節---小的火星文,這些細節是體現Icon自身精致的部分|_-234彩票计划,同時也會影響用戶對於產品和品牌的認知聯係|-云顶娱乐靠谱吗。影響產品的感性認知觸達用戶內心--39彩票的手机网站。


例_-蒙牛纯牛奶图片:下圖以“大眾點評”中的“拍視頻”icon做舉例說明

Image title



風格

1)||飞鹤航空官网、品牌理念

2)|央视6套节目表、產品特色

3)||叶檀简历、視覺特色

品牌理念是是指產品背後的定義和想要傳遞的價值||提手旁上下。通過簡介的符號-中国军衔胸章、文字傳遞給用戶的認知||15时时彩、理解-_-色狗图片、印象||zoozooskooi在线视频1、感受-||7k7k7k。通過塑造品牌理念的塑造|-_张柏芝约谈谢霆锋,和用戶在感性層麵形成共鳴|_|芝兰粉。融入品牌基因的Icon係統具有更好的辨識性和認同感|_-盈彩网app下载安装。這需要設計師和業務團隊一起溝通產品--36选7复式8个号多少钱,深入理解業務-|-fj12530,總結出關鍵詞語表達品牌-|_奥特曼之超决战,最終和業務團隊達成統一共識__|360彩票官网走势图。


產品特色指產品在同行業中的定位差異_江苏天气预报10天,核型競爭力-__168娱乐2是什么平台。通過簡潔的視覺語言進行表現|众发境界哥赚了多少钱。通常的產品特色體現在業務範圍_钨矿、用戶群體--|无限挑战120121,使用場景||_英语时态表,產品功能等|_永胜国际app是干什么的。在這四個維度中總結歸納成可落地的具體的表達關鍵詞_||360幸运飞走势图彩,進一步具象化--|脱狱之王第三季。


視覺特色指在競品分析中|-|优发国际娱乐官网登录,總結得到在視覺層麵其他產品中可以借鑒的感性共性和自己產品定位差異性的結合-亿彩下载。通過可借鑒的共性傳遞行業的特點_-|132彩票平台哪里的?,而差異化的視覺表現可突出自己產品的特色和競爭力-|_50018。


例__-1q币购物券怎么用:繼續以“拍視頻”Icon為例子進一步解釋說明

Image title



一致性

一致性的綜合表現在圓角众博彩票手机客户端、透明度-众博线上娱乐、線條粗細 _甲申日、間距_002全讯、顏色_08彩票首页、層級_|红晶兴、漸變__坛缘坊、特色細節_|长三角区域规划。


Icon的一致性有利於降低用戶的認知成本___2m彩票牛蛙永久开奖直,便於品牌傳遞--闯荡古玩江湖,而Icon的非一致性會增加用戶的跳出感-玉子金童,降低用戶對於產品專業度的認可陈桥兵变令人疑。通常情況下可以通過以上8個維度進行分析和提煉-陈翔卡通图片。前七個維度大家比較好理解||_蛊惑总裁。重點解釋一下第八個維度“特色細節”||_艾吉akey,特色細節是設計師通過對於產品和業務的理解主觀加入的一些關鍵性視覺表現的點__亿博彩票是真的吗,增加產品一致性的基因_-_易赢彩票,可能是斷線|神州行充值卡序列号,尖角_||虞城县教育网,原點等等標誌性元素-雪菲官网。


例-||众发彩票官网app下载:下圖通過對“大眾點評”Icon做拆解進一步從六個維度說明Icon係統的一致性(並不是說每一個icon的設計必須包含八個維度)

Image title



範圍

視覺範圍和熱區範圍


隨著Sketch的普及_-31彩票,更多的設計師開始采用一倍的設計畫布輸出設計方案--月城瑞妮在线,但在設計的過程中需要注意視覺麵積和物理麵積__球衣之家,兩個Icon的物理尺寸大小是一樣的-|-优优娱乐彩票怎么样?,視覺感性的麵積偶爾會變化_|六月情天。所以需要在設計完Icon之後_|易发彩票邀请码怎么找?,對Icon進行排列_|-蛮荒之友,進行視覺對比-芬兰语词典,發現視覺的不一致性-_解放金铃。


熱區範圍是代碼定義的用戶可操作的交互麵積_|长武公众信息网,視覺是感知不到的|||142857真的能预测彩票。熱區範圍的確定有利於開發工程師和設計師達成視覺方案的一致_-老股民博客。避免後期由於大家對於方案設計-正版only女装折扣店、開發理解的不同|-汤池小镇,增加後續溝通的成本-锐度网站。通常情況下會出現的問題就是

1__众博国际app下载、界麵開發的還原度低

2--铜镜反应、熱區範圍過小_-徐娇电影,用戶無法點擊

3|-挑拨离间的话叫什么、Icon的熱區範圍不一致-_|丁丁和杨坤后场接吻。

Image title



總結

在設計的過程中_水观音擦皮鞋麦词,Icon的樣式可以借鑒-||春暖花开 亚洲专区,但要根據自己的產品做形式上的調整_||云顶娱乐怎样注册账号,具體可以通過上述談到的幾個維度作為切入點調整Icon__ovi套件。同時在設計的過程中避免無窮的細化|_花果园业主论坛,因為有些細節用戶根本不會觀察到__1990的彩票台子,這樣做隻能是設計師的自嗨|-众彩彩票骗局揭秘。設計師容易漏掉的是熱區範圍的確定-|2019年四不像正版,盡管Ios平台和Android平台都有對於Icon範圍的定義_|衡水热线,但針對產品的icon熱區範圍調整還是要有設計師自己的想法__臻怎么读。這樣才能增加Icon設計的思考價值--_105彩票安全吗,也更符合產品自身的特色_-暧昧的颜色。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__车之旅自驾游资讯网,為期望卓越的國內外企業提供卓越的UI界麵設計_|小骨头影院、BS界麵設計 |-众发娱乐app下载、 cs界麵設計 -|春天的作文200字、 ipad界麵設計 |_觅血者、 包裝設計 -_鲤鱼山火山爆发时间、 圖標定製 -青春h2之开心老人、 用戶體驗 __|突泉信息港、交互設計-|永盛国际手机彩票、 網站建設 _-润美娇、平麵設計服務__钱塘老娘舅2013直播。

分享到_隆鼻尖: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap