追求卓越一諾千金

藍藍設計__|黄油小熊是谁,2011年成立|永胜彩票平台,主創清華團隊|_许美静 倾城,專注軟件和互聯網ui設計開發||倾城 许美静。擅長企業信息化管理|_8岁儿童营养餐、監控-宁远红网、大數據軟件UIUE谘詢和設計開發服務-|海葬费用。立足UI|柏原崇 佟丽娅,好好學習_|-168下载最新下载,天天進步--长沙三毛妮休闲中心!


界麵設計——視覺層麵的三維解析

2019-7-31 分享達人 設計思維



如果您想訂閱本博客內容铁三角ath t50,每天自動發到您的郵箱中__-永宁政府公众网, 請點這裏


在我看來_||天津洗浴,界麵設計的視覺層麵主要可以分為三個維度來解析_|勇士vs步行者:信息傳遞|-_沈阳红番区打架喊人、視覺美化-|填字游戏在线、創意創新|-魅力研习社21期。



界麵設計是一個很龐大的體係|_-众赢国际是什么,具有很多原則-1比1现金兑换捕鱼游戏,比如輕量--节操卫视、容錯_-金陵女神、清晰等等--黄牛课件,其中包含了交互層麵以及視覺層麵等-_|二胡几根弦,今天我想單獨把視覺剝離出來|_畅购卡,來講一講我對界麵設計“視覺層麵”的理解與認知-|球衣之家。


在我看來-_移动旺旺,界麵設計的視覺層麵主要可以分為三個維度來解析_|_永宁政府公众网:信息傳遞-_306官方彩票、視覺美化--|南海事件、創意創新-|22彩票平台提现不到账。


信息傳遞是讓用戶看的明白_-乔洋演唱会,快速清晰的獲取信息|舞乐天使;

視覺美化是讓用戶看的舒服_-北京甘露寺,讓界麵足夠美觀___易旺彩票网犯不犯法;

創新創意是讓用戶看的驚喜-|阿朵减肥,看到一些不一樣的創意點_-09版qq下载。


如下圖:



三個維度的目標如何實現呢|__李斯丹妮李茂?我提取了以下三個關鍵詞|_2019开奖记录l青蛙彩票:



清晰||云彩上的翅膀、和諧--|135彩票平台可靠吗、獨特是我們要達成的目標__-杜兰特3代战靴,達成目標一定會有一些原理所在_|空间克隆,而有了原理就會有具體的執行方法-_湖南移动梦网营业厅,所以後麵的每一個知識點_--2628彩票注册链接,我都會按照“設計目標-執行原理-執行方法”的邏輯給大家講解-众彩网app怎样下载,大綱如下|-果酱汉堡店变态版:


1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大


2 和諧

2.1 和諧-呼應-顏色呼應

2.2 和諧-節奏-變化對比

2.3 和諧-飽滿-負形縮減


3 獨特

3.1 獨特-品牌延展-IP形象結合

3.2 獨特-事物本意-事物圖形化



1.清晰 

1.1清晰-降噪-容器整合  

設計目標|_许昌施华洛婚纱摄影:清晰

執行原理-|_008彩票怎么样:信息降噪

執行方法___吕正操追悼会:容器整合



當界麵信息過於分散時-|有约鞋批发网,會對用戶造成不必要的幹擾-|芦竹根,導致用戶產生疑惑甚至直接離開界麵--智彩电子走势图下载。


作為設計師|_pp助手源地址,要做的就是對信息進行整合-__御龙在天野蘑菇,我們可以稱之為信息減噪-|黑香米产地,目的就是讓頁麵更加清晰-|2m彩票2m彩票振撼来袭,減少幹擾_-求身份证号。


這裏我經常使用“容器整合法”來讓內容更加清晰__105彩105彩票网、聚焦_-_杭州客运中心网上订票。


當分散的內容裝進一個“容器後”|_好爱答题,就可以使內容聚焦在容器當中|2004009期双色球号码,讓信息更加規整_嘉祥石雕艺术节。而卡片就是一個很好的“容器”||-防火塑料布。


實際案例|-_11选五复式价格:

在改版騰訊動漫個人中心的時候|赢太多钱博彩公司会追杀吗,頭部就存在信息分散不聚焦的問題||高中生炒股赚4 5亿,四個視覺觸點(綠色圈處)分散在四個角落|-张太太旗舰店,形成極大幹擾|-三星w599报价。



這裏我就采用了”卡片容器“的方法__蓝色冰晶瘦身霜,將信息裝進容器中||诺曼琦官方网站专卖店,減少分散信息的幹擾-_致哀 志哀,使界麵更加清晰_云购彩票是什么、工整___澳门大学内地招生,效果如下|镜之大迷宫金手指:


 

現在很多產品都在使用卡片化的布局--鱼团网 衢州,尤其是在信息數量|19彩票平台、層級較多的時候--法网决赛时间,更加需要有容器將其規整起來--破解小黄车密码方法,這樣才會讓界麵保持不亂-|-093彩票合法吗!



1.2 清晰-聚焦-局部放大  

設計目標__|永城彩票首页:清晰

執行原理|桀骜值:聚焦

執行方法|_-博格利佳:局部放大




我們在平時做需求的時候_-俄罗斯一f级毛片,經常會遇到信息特別多__-艳艳乡村全文阅读,特別亂的時候_-热血无赖4个特别的数字,如果此時我們選擇什麼都想突出-_求身份证号码,最後的結果一定適得其反_|长盛井管,什麼都突出部不了-|-天下足球十年,這時候就需要我們選擇一些內容來進行局部放大|_联想a60手机游戏下载,反而可以讓整體信息更加聚焦-artcase、清晰||苗老表。


這種方法經常用在有數字展示的頁麵當中||_金范金素恩小说,比如下麵這種頁麵038彩票网址:



再比如_-隐藏密码,下麵這個模塊信息|-_永盛彩票手机,如果”3“沒有放大-_093彩票安全吗?,整體的信息會亂到你眼花繚亂|--楚雄999手机网,我們看下對比|_|2017 电影:



所以|众博彩票网,大家在遇到有數字---红光二手房出售,且信息雜亂的時候_-人受杂交,就可以采用局部放大的方式來使整體更加聚焦-台州美食、清晰__|金宝贝取名网。



2.和諧  

2.1 和諧-呼應-顏色呼應 

設計目標-_易赢彩票网址下载:和諧

執行原理-__易彩—彩民福地登录APP:呼應

執行方法||_铲形币:以顏色呼應為例


 

很多時候我們會覺得自己做的東西很不和諧|_-金盟减肥,其中一個很重要的原因就是因為頁麵中沒有貫穿的元素||1号平台号平台官网,也就是沒有呼應__-十大经典电影排行榜,很常用的一個呼應的方法就是顏色呼應|-|美术生高考分数线。


例如這個畫麵總看起來不夠和諧_|这五个人火了,你會覺得綠色很突兀--038彩票是官网平台吗,就是因為顏色上沒有呼應|-飞普斯:



而一旦你想辦法-_停车场尺寸,讓綠色“事出有因”-|亿乐彩页面网址,比如取自眼鏡的顏色-_69代理:



那麼__掌信彩app下载,突兀的問題解決了--1号彩票信得过吗?,和諧的目標也就實現了|_-醉落雪暗香。

而剛才那個人中心的界麵_-上海麦当劳网上订餐:



我們會發現-|_娱乐天地手机登录,圖標的顏色也是取自背景色|-|钢坯成本,所以整體看起來才會如此和諧-兰州摸吧。


除了顏色呼應-_-亿发彩票?,還有很多呼應的方式_188彩票在线网址,比如圖形-15分彩技巧、圖標風格等等_|-南滨是哪个省的,這裏就不再舉例了|_-童小牛是哪个电视剧。



2.2 和諧-節奏感-對比變化 

設計目標_||需要杨光:和諧

執行原理-35彩票网官网:節奏感

執行方法___掌上彩票pro网络异常:對比變化



對於音樂-__李天一受害老师照片,節奏感是非常重要的-|雅信cat,如果一段音樂一直是一個頻率||优惠多金币联盟,那可能也算不上音樂了--|意彩怎么注册。


界麵也是一樣的_-绍兴特色菜,節奏感是讓頁麵變得“和諧”很重要的因素之一-金鼎大豆油,如何做到呢_-qq刷钻器2013免费版?


我們在展示文字列表的時候_||门头沟歌华有线电话,你覺得下麵兩種哪個更舒服些呢_|嵩县田三红?



我猜你會覺得第二個舒服一些|-149期大乐透开奖结果,因為它有變化|399彩票什么时候开始,有節奏感-_腐化的源头,所以它和諧-|cf卡墙教程、舒適||配角曹轩宾。


我們會發現很多產品首頁帶有封麵圖的列表都有很多種排法|_-qq软件下载2011正式版免费,例如1帶多-保定独立团,1x2_盈彩app正规吗,2x2___陇南市人民政府网站,2x3等等|-诺基亚5700主题:



就是為了防止每個模塊過於重複--淳化租房,如果每個模塊都是每排兩張封麵_-耄耋佳缘,一直下來_-诺基亚n79论坛:



看起來會非常乏味-靓眼网。


2.3  和諧-飽滿-負形縮減 

設計目標|-360彩票购彩大厅官网:和諧

執行原理-善淘网首页:飽滿

執行方法|-_105彩票提现要多久到账:負形縮減



在做圖標或者字體的時候|-|淑女屋品牌折扣店,經常要講一個原則就是“飽滿”_|_注册送28的彩票app,界麵上每個“不能拆分的元素”都需要盡量做到飽滿-__艺龙如何返现,比如圖標_-小时代 快乐大本营,再比如下麵這個信息組件-_-暴龙摩托:



正文就屬於不能拆分的單一原子||_金饶,大家可能會問_玫琳凯督导,這種信息不就是方方正正的一個信息塊嗎_|-掌上永辉最新版,怎麼會不飽滿呢_--至爱亲朋电视剧,比如行間距過大_|兰桂坊消费:



再比如--htc手机防盗,我在優化騰訊動漫信息流的時候--中央领导人名单,發現正文出現的表情遠遠大於文字-078彩票网,如下圖奾奿聊天室:



表情一旦出現_河北省学位网,就會造成大量空隙(負形過大)-_-广珠城轨网上订票,導致整體不夠飽滿--手机qq 2010、和諧|阿发祥。

我們可以看下其他產品-|计一彪女儿,表情和文字幾乎都是一樣的大小||众赢彩票技巧,他們都會盡量縮小負形空間(也就是空隙小大)-|-聊斋奇女子之小谢:



在這樣的原則之下---闪光夫妇下车,優化後的效果如下|_-dsound.dll病毒:



以上是關於和諧的幾點方法vkke创始人何婧婧。


3.獨特 

如果你的界麵做到了清晰-锦绣庄民间艺术园、和諧--第一部断代体史书,在視覺層麵就已經算是及格了-_|奥术扰动,如果還能加上一點小創意_|亿人娱乐注册平台,就可以讓人眼前一亮--_7788电视剧百度影音。

如何能夠做到獨特||_亿赢彩票平台?可以從兩方麵出發|_御龙在天野蘑菇,1是品牌_|铠甲勇士后传全集,2是內容本身含義-骨碎补总黄酮。


3.1獨特-品牌延展-吉祥物結合  

設計目標-兰州房价:獨特

執行原理|1288彩票是哪个国家的:品牌延展

執行方法|||530u3b:IP形象結合



從品牌出發|--cctv10怪兽之谜视频,可以有很多方向_银彩会登录,比如logo|__能耐的意思,圖形|-易中彩票怎么样,品牌吉祥物等---pc蛋蛋幸运28助赢软件,下麵以品牌吉祥物為例-_1号平台登录:

在做小說閱讀器的時候_|-智彩快乐十分app走势图,有一個設置選項是選擇文字的背景顏色|__qq互赞群,選擇控件是圓形||大旱之年,而品牌形象也偏圓形-||哈刚少侠,此時就可以將圓形控件與形象相互結合:



但是選擇控件有兩種狀態-国家领导人,為了更加生動_--盈彩在线首页,就讓給形象正麵麵對你的時候作為選擇狀態__蒙牛纯牛奶图片,而轉過身作為非選擇狀態__|关予涵,大概效果如下:



此創意已在騰訊動漫小說落地實現-_|优彩彩票靠谱吗。


3.2 獨特-事物本意延展-事物圖形化 

設計目標|-35彩票安卓:獨特

執行原理--_2019最快开奖结果:事物本意延展

執行方法|--优信彩票怎么样:事物圖形化



除了品牌_|-娘家的故事3主题曲,還可以根據事物本身的意思來延展圖形长江电力电子商务,比如日間夜間模式的切換按鈕||演员表,男女性別的切換按鈕长乐市人民政府,都可以利用事物本身的含義來延展圖形設計:



此創意已在騰訊動漫個人中心模塊落地|公安部2002年春节晚会。


再比如_|双胞胎饲料价格,彈幕的展示方式-|九伯网,就可以聯想到電視機|__108娱乐真的赚钱吗,再把電視機圖形化|铠甲勇士刑天后传全,如下圖:



此創意已經在騰訊動漫小說頻道頁實現-|_陕西中医学院综合教务管理系统。


這裏需要注意下_|-快穿之宛儿的任务H,有時候如果圖形過於普通|_-难报三春晖ppt,可以配合動效來增加獨特性_||江苏数学高考试卷,但一定要注意開發成本|-穿越之混元剑圣。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|--青银高速公路地图,為期望卓越的國內外企業提供卓越的UI界麵設計--www xm12333 com、BS界麵設計 |||陈二雷、 cs界麵設計 |-众博赌博没人管吗、 ipad界麵設計 _-王梁微博、 包裝設計 -|锦州中百、 圖標定製 -正能量歌曲、 用戶體驗 |345彩票这几天提现不了、交互設計-||优彩彩票网合法吗、網站建設 |_女士毛衣编织款式、平麵設計服務__-钟舒曼。


標簽: 界麵設計——視覺層麵的三維解析 « 2020 年值得關注的 10 個UI 設計趨勢 | 產品設計之「取消按鈕」的使用詳解 | 細節分析»


訂閱Rss