ICON設計法則—菱形法則

2019-2-19 泥人張 設計思維

如果您想訂閱本博客內容_|娱乐天地开奖结果,每天自動發到您的郵箱中|_1号彩票主页, 請點這裏

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

網絡上有很多關於Icon設計的文章-_黎巴嫩邮编,一些文章從部分維度切入講述Icon的設計理念|||脱狱之王第二季,但大部分缺乏整體性|晋城五人。


所以我嚐試把自己的思考方式結合其他人的設計理念整理了一個完整的Icon設計法則--_金箍棒dota,通過簡單易懂的描述語言--_苟各庄住宿,並且結合設計案例呈現出來-|娱乐天地点检官网注册,希望能夠對大家有所幫助_--智胜软件彩票。文章使用的案例隻代表個人觀點-_-阿里170号段预约网站,並不代表相關產品_2019六开彩香港开奖结果。


本文重點講述Icon設計思維|武汉市新洲区黑社会,關於Icon的具體定義以及具體的製作過程就不再贅述|_黄梁txt,網絡上有很多相關文章都有講述__长治县政府网。


從不同維度對Icon設計進行解析_|_佟丽娅离婚将净身出户 是真是假,整理一整套Icon的設計法則|_节操卫视。每一個產品中都有不同類型的Icon-__盈彩娱乐,產品通過Icon可以快速的向用戶傳遞語意__许娜京,通過獨特的設計語言讓用戶形成對於產品的認知心智-258nba竞彩。Icon的重要性就不言而喻了_|_盈彩网三分时时彩定位。


ICON的設計法則-菱形設計法則-|_长江流域地图,主要包括語意--掌上永辉职工APP、層級|-朱云来妻子、設計形式|__阴道老化、風格--铜皮规格、一致性__-希苒女装、範圍||瑟鼓邮购。而其他的設計思考也是這個設計法則的變體-__3600彩票,中心思想沒有發生變化||178国际娱乐app。通過對以上設計思考點的聚合|||舆情早报网,來設計能夠傳遞Icon語意_-众盈彩票投资是真的吗?,並且能夠清晰展現產品結構和信息層級的Icon係統-垃圾短信轰炸机,通過差異化的設計形式展現產品設計的獨特風格_-gm730e,讓具有一致性的設計語言傳遞信息_|爱国者同盟网,和用戶形成共鳴|-重庆419。

Image title



層級

第一層級Icon

第二級別Icon

第三層級Icon

第一層級的Icon一般指首頁的井字入口Icon_|维修psp,讓用戶快速獲取入口信息|有什么好看的科幻电影,完成對產品流量的分流__|menu键,讓用戶快速完成自己的任務-0k000澳客彩票电脑。這種類型的Icon是級別最高的|--106彩票注册,無論是麵積__云天国际彩票是真是假、形式感_-亿彩网里的钱能提现吗、視覺衝擊力都應該是最突出的-|鹿喜微断食纤体,這種高層級的Icon可以簡單通過一下三種方法表現_-1博彩票如何,1|_苍井空百度云百度知道、擬物化的設計方式增加視覺重心和吸引力|虚拟网短号查长号。2-_银彩、通過細節的增加呈現Icon設計的複雜形式感|闪光夫妇为什么下车。3_--注册即送19元彩金彩票、采用衝擊力強的色彩對比|_-135彩票是正规网站吗,抓住用戶的關注點-|-二手丰田普锐斯。除此之外具體的思考過程___阿拉酷,後文也會詳細講述|_川师附中高中部地址。


下圖分別是“自如” “每日優鮮” “大眾點評”的首頁入口Icon|_-全运会女排决赛时间,分別采用了擬物化設計_|lol定级赛规则,細節添加|_高清翡翠台,色彩對比的設計方法||陆地蟹。

Image title


第二級Icon歸納為導航類型的Icon||_1749天空彩票与你同行旧版区,引導用戶操作產品_|五色国际,完成用戶的任務_-|断纸机,同時傳遞品牌特色-|金玲玲。這種Icon類似真實街道中的指向標_-|诺基亚qd软件下载。第二層級的Icon不需要做的視覺重點非常重_-至尊无名,能夠讓用戶認知到--_铁道兵家园网,並且了解Icon傳遞的信息||-106时时彩网站,在操作行為上產生預期就可以__-英冠达。通常的設計樣式是線型Icon或者是麵型Icon||众亿彩票平台。


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

Image title


第三類Icon是語意型Icon|-描写大自然的优美语句,主要是向用戶傳遞信息-手机分享区,烘托信息氛圍-__溶剂脱色剂,並且引導用戶瀏覽信息|__健康666。這種類型的Icon視覺相對較輕-云帆彩票,且不可點擊_武汉体育学院校园网,具體的設計思考在後續的內容展開|_-运盛彩票是哪里的网站。


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

Image title


以上三級的劃分並不是說Icon隻有這幾種類型-长城干红赤霞珠1994,這樣劃分是從功能和視覺上進行區分便於設計同學理解-||余庆教育网,當然在具體的設計過程中也可以對Icon進行更細化的區分--嘉祥石雕艺术节,最主要根據具體的需求去定義Icon的層級--|欧莱雅祛疤产品价格,然後再采用對應層級的設計語言__诺基亚5238刷机。


語意    

1)-天津哪里剪发好、Icon背後的語意(Icon的特性歸納)

2)||-我们结婚了泰民停拍、Icon的可識別性(Icon的特點表現)

Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產品信息|_闫雪瑞。所以在Icon的設計之前_-|shinee隐藏摄像机,需要思考Icon背後傳遞的文字語意|168开奖官方网站,理解語意__106官网彩票计划,構建對於語意的多維拆解(比如沙發是由靠背||歌曲相信自己、兩個扶手||-致富彩票是真的吗、四條腿構成_--广州缓交女,重心要穩_|cad2004免费版下载,和床有哪些區別等等)|-|阿里170号段预约网站。同時還需要思考Icon圖形化之後的可識別性|-土特产礼品,基於對用戶認知的了解|_|第一部断代体史书,歸納Icon設計中需要具體表達的幾個關鍵特點||-锦州铁通影院网址,迎合用戶的認知心裏|-雅思口语考试时间。幫助用戶快速的獲取Icon想要傳遞的信息__男科悍医,如果不能快速的獲取---11选5南京华彩,反而增加了用戶獲取信息的成本-_何小萌萌萌吧,那就本末倒置|-吴碧云,削弱了用戶的使用體驗_|_洪荒太极。


例||苏州升格为计划单列市:下圖是“大眾點評”二級Icon設計的語意表現思考方法

Image title



設計形式

1)--赢咖注册地址、外形

2)|苏州金鸡湖景区、表達方式

3)_|罗莎月饼、色彩組合

4)_|c7000、Icon特色

外形是Icon 的基本形態_-108娱乐是正规的吗,不同的形態傳遞不同的視覺感受|--金贞熙,構建不同的心智|-|这五个人要火了。同時Icon的外形決定了內部元素的設計___福建少儿频道节目表。


Icon的表達方式主要兩種_-|公羊羽,分別是線型Icon__-调查表作文,麵型Icon||长葛市教育局。線型Icon形式抽象-|qq空间克隆下载、簡潔___芳草集小米草眼霜,便於用戶識別-||078彩票网,用戶認知成本較低|-金宝街百丽宫,缺點是Icon容易極簡_|长青贝妮,造成了似是而非建行活期存款利率,可識別性降低_中博彩票注册。麵性Icon相對線型Icon視覺重心更突出|_|288彩票平台,便於用戶聚焦|_-聚美优品网页打不开,設計表現形式會更豐富-_苏州十中吧,缺點是可能會過於複雜|-问道信,造成信息層級混亂|-亿赢彩票qq客服,增加了用戶的認知成本||-艾儿兰德 鲍德温。


色彩組合_-模特李娟,就是Icon中的色彩語言-_云购梦想,在設計Icon的過程中通常包括單色係的Icon和色彩組合係列的Icon|--亿彩彩票注册。通過不同顏色的組合傳遞產品的品牌形象和產品特質|拱北在哪里,在設計Icon的過程中_|至尊传奇手游,尤其是導航Icon的過程中不建議使用超過兩種顏色的Icon--3g计划网时时彩,這樣容易使用戶視覺疲勞|-|cctvbox2012官方下载。


Icon特色是Icon在設計過程中的細節--柏木美玲,這些細節是體現Icon自身精致的部分-致富彩时时彩,同時也會影響用戶對於產品和品牌的認知聯係_306老版彩票。影響產品的感性認知觸達用戶內心-28彩票娱乐平台注册。


例--金华职业技术学院邮编:下圖以“大眾點評”中的“拍視頻”icon做舉例說明

Image title



風格

1)-__亿人娱乐平台是骗局吗、品牌理念

2)|双鹿空调故障代码、產品特色

3)_-掌信彩软件用什么下载、視覺特色

品牌理念是是指產品背後的定義和想要傳遞的價值||易彩堂安全吗。通過簡介的符號__莓文化、文字傳遞給用戶的認知||中兴彩票准成不、理解_|云顶娱乐官网下载ios、印象__|093彩票软件100、感受||诺基亚6120软件下载。通過塑造品牌理念的塑造-_-盈彩在线贴吧,和用戶在感性層麵形成共鳴__|093彩票计划。融入品牌基因的Icon係統具有更好的辨識性和認同感-_永利怎么不能提款了。這需要設計師和業務團隊一起溝通產品--|雅马哈r6报价,深入理解業務__-永盛国际被关了,總結出關鍵詞語表達品牌_-郸城黑社会,最終和業務團隊達成統一共識_-|铁打一只船。


產品特色指產品在同行業中的定位差異|_|众赢彩票的骗局,核型競爭力-|刘春天膏方网。通過簡潔的視覺語言進行表現|-致胜网。通常的產品特色體現在業務範圍_-106官网彩票是真是假、用戶群體_-|注册送彩金彩票大全,使用場景|-什么的枝条,產品功能等--_宝利格改装卡宴。在這四個維度中總結歸納成可落地的具體的表達關鍵詞||皮肤病大王,進一步具象化-||卡通战争剑灵中文版。


視覺特色指在競品分析中__|孝感学院新技术学院教务管理系统,總結得到在視覺層麵其他產品中可以借鑒的感性共性和自己產品定位差異性的結合_|-妇女的定义。通過可借鑒的共性傳遞行業的特點-||盈彩在线是不是诈骗,而差異化的視覺表現可突出自己產品的特色和競爭力||_长江电力电子商务。


例_|-快乐大本营之天天有喜:繼續以“拍視頻”Icon為例子進一步解釋說明

Image title



一致性

一致性的綜合表現在圓角|芦荟棉是什么面料、透明度|__尚志都市、線條粗細 __-银彩下载、間距-联想idealife、顏色-|易中彩票代玩、層級|-博客门、漸變-_法网决赛时间、特色細節_|诛仙漫画下载。


Icon的一致性有利於降低用戶的認知成本|_小刀开瓶器,便於品牌傳遞-_济南一中升学率,而Icon的非一致性會增加用戶的跳出感||_出入境检验检疫局待遇,降低用戶對於產品專業度的認可_|高清主题。通常情況下可以通過以上8個維度進行分析和提煉-_-优信彩票破解方法。前七個維度大家比較好理解|_易彩是什么。重點解釋一下第八個維度“特色細節”--|三菱suv,特色細節是設計師通過對於產品和業務的理解主觀加入的一些關鍵性視覺表現的點_众博赌博,增加產品一致性的基因众发彩票网,可能是斷線-__苍井空快播种子,尖角_|_遗言网,原點等等標誌性元素_-|银河彩票网址。


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

Image title



範圍

視覺範圍和熱區範圍


隨著Sketch的普及-超级psd502,更多的設計師開始采用一倍的設計畫布輸出設計方案_欧洲古典四大名著,但在設計的過程中需要注意視覺麵積和物理麵積|__热血无赖4个特别的数字,兩個Icon的物理尺寸大小是一樣的-_淘宝开店流程及费用,視覺感性的麵積偶爾會變化|丧尸出笼血脉。所以需要在設計完Icon之後-|世界大观,對Icon進行排列__-易旺彩票网是真的吗,進行視覺對比_||正能量歌曲,發現視覺的不一致性|-谈爱李白。


熱區範圍是代碼定義的用戶可操作的交互麵積-|-捷安特770,視覺是感知不到的_松原启众网。熱區範圍的確定有利於開發工程師和設計師達成視覺方案的一致|-兰州商学院教务系统。避免後期由於大家對於方案設計-|-天府新区总体规划、開發理解的不同||-众彩国际app,增加後續溝通的成本-|玫琳凯订单网。通常情況下會出現的問題就是

1_-|晶体敌百虫、界麵開發的還原度低

2-||项目投资计划书范文、熱區範圍過小_-致吸血鬼的五曲,用戶無法點擊

3||南汇酒吧斗殴视频、Icon的熱區範圍不一致-长治市教育局网。

Image title



總結

在設計的過程中陆良黑社会,Icon的樣式可以借鑒_|-105彩票可靠吗,但要根據自己的產品做形式上的調整||_2017黄播裸播app,具體可以通過上述談到的幾個維度作為切入點調整Icon_|_杭州sn。同時在設計的過程中避免無窮的細化-|_蓝波宽带,因為有些細節用戶根本不會觀察到--全际通物流,這樣做隻能是設計師的自嗨__东珈精鹰成员。設計師容易漏掉的是熱區範圍的確定-库提价,盡管Ios平台和Android平台都有對於Icon範圍的定義_-|卡其色衬衫,但針對產品的icon熱區範圍調整還是要有設計師自己的想法_||公安部2002年春节晚会。這樣才能增加Icon設計的思考價值|_-yy飞机票格式,也更符合產品自身的特色-_泡沫坊。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司||-苏州园区三中,為期望卓越的國內外企業提供卓越的UI界麵設計蛮荒之友、BS界麵設計 |-|牛郎星手套、 cs界麵設計 _|_1号彩网下载、 ipad界麵設計 --防狼水、 包裝設計 _|剑气侠虹、 圖標定製 |至尊六舍彩论坛、 用戶體驗 __包装设计论文、交互設計|-qq2011版、 網站建設 |-3b五码遗漏彩票大赢家、平麵設計服務-__线性代数第二版答案。

分享到-铸铁压滤机滤板: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap