今天我要和大家介紹的這位設(shè)計(jì)師，他在業(yè)內(nèi)被譽(yù)為是“信息可視化設(shè)計(jì)”領(lǐng)域的天花板。一提到信息可視化這么高大上的詞，相信大家都多少有些了解，在日益復(fù)雜的信息交流活動(dòng)中，將信息圖表化已經(jīng)是一名設(shè)計(jì)所必須掌握的技能之一了。
舉些常見的例子，比如在公共場(chǎng)合中，我們看到的交通標(biāo)志，以及用來顯示地理位置的地圖、將時(shí)間具象化的時(shí)刻表等等，這些數(shù)據(jù)都以某種圖形化的形式呈現(xiàn)在我們周圍。
而信息可視化領(lǐng)域也不僅僅是將簡(jiǎn)單的數(shù)據(jù)繪制成圖表那么簡(jiǎn)單，比如要弄清楚社會(huì)中隱藏著的各種問題，從而促進(jìn)新觀點(diǎn)的提出和對(duì)問題解決的思考。這種并不以信息為主導(dǎo)，而是著重于根據(jù)創(chuàng)建者的主題來選擇要傳達(dá)的信息，并尋求接收者的主動(dòng)解釋。
而我們今天要介紹的這位設(shè)計(jì)大神就是這個(gè)領(lǐng)域的專家
△ 中野豪雄 TAKEO NAKANO 圖形設(shè)計(jì)師
1977 年出生于東京都。武藏野美術(shù)大學(xué)畢業(yè)，師從著名設(shè)計(jì)師勝井三雄。2005 年設(shè)立中野設(shè)計(jì)事務(wù)所。以信息的構(gòu)造化和上下文的可視化為主題，在各種領(lǐng)域探索圖形設(shè)計(jì)的可能性。日本 typographic 年鑒大獎(jiǎng)賽，同最佳作品，造書裝幀比賽經(jīng)濟(jì)產(chǎn)業(yè)大臣獎(jiǎng)等獲獎(jiǎng)。入選世界海報(bào)三年展和拉哈蒂國(guó)際海報(bào)雙年展等。作為邀請(qǐng)作家參加了國(guó)際泰晤士報(bào)雙年展“首爾 2011”。文藝博物館永久收藏。武藏野美術(shù)大學(xué)、多摩美術(shù)大學(xué)教授。
咱們先來看看中野老師平時(shí)的作品都長(zhǎng)什么樣吧！
是不是很厲害！但說實(shí)話，這種信息的密度，工作量絕對(duì)是巨大的！而在一些訪談中，中野老師也明確指出，自己更傾向于采用更宏觀的視角去做設(shè)計(jì)，因?yàn)檫@樣不僅能夠達(dá)到傳達(dá)目標(biāo)，同時(shí)也由于對(duì)比的存在，進(jìn)而產(chǎn)生嶄新的視角。
圖中我們現(xiàn)在看到的信息可視化海報(bào)，是 graphic trial 2015 的一次展覽。老師一共設(shè)計(jì)了五張 B1 大小的凸版印刷海報(bào)。內(nèi)容是關(guān)于地震的四年時(shí)間里，哪些話題被人們報(bào)道直到事件完結(jié)，然后回歸到日常生活中。以及在大數(shù)據(jù)為主的信息社會(huì)中，思考有關(guān)制作印刷物的意義。
人們?cè)诘卣鸢l(fā)生時(shí)，所接受到的信息，就像圖中展示的這樣，是從喧囂到日?；耐埔坪脱葑?，老師會(huì)考慮到，促進(jìn)這個(gè)過程的因素和推動(dòng)力是否能夠被可視化。從當(dāng)代語(yǔ)言推動(dòng)社會(huì)發(fā)展的角度去考察，想象著是否能將這個(gè)語(yǔ)言本身地圖話。從而建立起一個(gè)提供人們思考的平臺(tái)，這也是平面設(shè)計(jì)能否引發(fā)輿論爭(zhēng)議的關(guān)鍵。
首先我們從信息收集的角度來向大家講解，這張圖是國(guó)立情報(bào)研究所的北本先生制作的數(shù)據(jù)圖，搜索關(guān)鍵詞是“受災(zāi)地”。圖中折線展示的是，受災(zāi)四年間，相關(guān)詞被搜索的高峰和頻率。
接下來我們來看這張語(yǔ)言地圖是如何被延展出來的，常規(guī)情況下，我們形容時(shí)間的話，當(dāng)然會(huì)使用線性的橫向時(shí)間軸。而中野老師的解決辦法，是將時(shí)間軸以環(huán)形的方式呈現(xiàn)，并且將起點(diǎn)與終點(diǎn)之間的差異可視化。
五張海報(bào)，分別從受災(zāi)后第一個(gè)月、半年后、一年后、兩年后以及四年后展開。呈現(xiàn)出由遠(yuǎn)到近的視角變化，第一張海報(bào)中，展示的是受災(zāi)后 31 天內(nèi)的變化，逐漸到最后一樣，受災(zāi)后 1460 天時(shí)，人們對(duì)于這個(gè)事件的關(guān)注轉(zhuǎn)變。
老師從北本先生那里得到的數(shù)據(jù)，大概可以劃分成四個(gè)種類，分別是時(shí)間、主題的力度、語(yǔ)言關(guān)鍵詞頻繁出現(xiàn)的次數(shù)以及與東日本大地震的關(guān)聯(lián)度。時(shí)間就是剛剛提到的，以環(huán)形角度的方式呈現(xiàn)。話題的力度越高，就會(huì)離中心越近，反之就越遠(yuǎn)。頻率則是按照關(guān)鍵詞出現(xiàn)的數(shù)量，以圓的大小來呈現(xiàn)。另外也通過顏色來區(qū)分與地震話題相關(guān)的詞語(yǔ)。
△ 一個(gè)月，六個(gè)月，一年，兩年，四年
最終就呈現(xiàn)出了這樣的畫面，首先這個(gè)項(xiàng)目是單人項(xiàng)目，所以合成這樣圖的工作量是非常巨大的，過程當(dāng)中老師也請(qǐng)到了一些研究者對(duì)這個(gè)項(xiàng)目進(jìn)行一些幫助。整個(gè)海報(bào)的重量據(jù)說非常重，拿起來大約有二十四千克。
如果使用常規(guī)的四色印刷的話，也就需要利用青品黃黑去合成不同的顏色。不過這樣最終的效果并不理想。
于是老師選擇了專色印制，也就是每一種顏色都單獨(dú)去印制一版。單獨(dú)印制一張海報(bào)，就需要反復(fù)印刷 16 版。
其中的黑色，也就是全部 16 版疊壓到一塊的效果，可以說是黑中之黑了。當(dāng)然這個(gè)黑色也是有所比喻的，也就是龐大的信息是無(wú)法單獨(dú)存在的，當(dāng)所有信息混在一起，才能比對(duì)出彼此的聯(lián)系。
第一張圖展示的是災(zāi)害發(fā)生時(shí)的第一個(gè)月，畫面中展示了很多的圓圈，大部分都發(fā)生在外圓，也就是說當(dāng)時(shí)各種各樣的搜索關(guān)鍵詞，與災(zāi)害相關(guān)聯(lián)，被搜索的頻率非常高。在色彩的區(qū)分中，我們也能感受到相當(dāng)強(qiáng)大的熱度。
這是兩年后的情況，也就是說圓的一半就是一年，左半邊就是第二年，可以很直觀的看到，前半年使用的暖色是比較多的，當(dāng)來到了后半年時(shí)，話題熱度逐漸冷卻的樣子。
來到第四年的時(shí)候，也就是圓的四分之一是一年。右半邊展示的是過去來年的樣子，而左半邊就是又過了兩年之后的樣子。整個(gè)圖標(biāo)展示的是起點(diǎn)“311”大地震動(dòng)開始的日期，直到截止四年后的 3 月 11 日。
可以看到暖色的部分逐漸變得零星起來。為什么會(huì)有這樣比較有規(guī)律的分布呢，那是因?yàn)榕霈F(xiàn)的位置都是所謂的紀(jì)念日，也就是人們會(huì)想起那次事件的日期。
比如其中煙花這個(gè)詞，就是從災(zāi)難過后才開始頻繁出現(xiàn)的，它代表了人們對(duì)于災(zāi)難的一種寄托，人們期盼著生活能夠回歸正軌。
這樣的可視化設(shè)計(jì)，意義在于人們能夠通過它，俯瞰全局，通過使用宏觀的視野來連接新的視角，讓人們意識(shí)到它們沒有注意到的觀點(diǎn)。各個(gè)詞語(yǔ)，會(huì)根據(jù)時(shí)間軸的變化與聯(lián)動(dòng)，起到喚醒記憶的作用。通過這個(gè)設(shè)計(jì)作品投影人們過去的經(jīng)歷。
它是從整體到部分之間的一種信息差異。就圖的整體視角來看，它表示了“人們遺忘的節(jié)奏”，進(jìn)而對(duì)遺忘進(jìn)行批判。另外從圖的部分視角出發(fā)，它表示了“記憶的意外發(fā)現(xiàn)”包含了對(duì)回憶的期待。
看到這是不是覺得中野老師很厲害呢。那么接下來，咱們?cè)賮砜纯此某砷L(zhǎng)經(jīng)歷
成為一名設(shè)計(jì)師的契機(jī)有很多，比如父母是設(shè)計(jì)師，或者是有看過一部激動(dòng)人心的電影海報(bào)，想要成為一名從業(yè)人員?？芍幸袄蠋熯x擇設(shè)計(jì)這個(gè)專業(yè)時(shí)卻完全不是這樣的。
他選擇的了一種極度理性的方法，逐一排除自己不喜歡的東西。
但這種做法本身就很難，最終中野猶豫著要不要選擇美術(shù)專業(yè)。始終沒有鼓足勇氣的他，還是向附近的預(yù)備校老師請(qǐng)教了這個(gè)事情。
聽了中野的情況后，老師的評(píng)價(jià)是，他覺得中野很適合平面設(shè)計(jì)這個(gè)專業(yè)，還問他要不要試試呢？
因此在報(bào)考志愿里，中野寫下了武藏野美術(shù)大學(xué)和多摩美術(shù)大學(xué)。如果按照主角光環(huán)的劇本，這個(gè)時(shí)候，中野老師應(yīng)該就已經(jīng)平步青云，從此走上人生巔峰了。
然而現(xiàn)實(shí)卻是，在第一次考試中，他卻落榜了。作為“差生”的他，周圍都是什么樣的人呢？插畫、攝影甚至編程，這樣的擁有特殊技能的人幾乎占據(jù)了大多數(shù)。在這樣的環(huán)境里，中野老師當(dāng)時(shí)卻并沒有什么特別的特長(zhǎng)，對(duì)于不善于表達(dá)的他，在當(dāng)時(shí)感到很無(wú)奈。
那時(shí)的他一直在問自己。我的特長(zhǎng)是什么？我的興趣點(diǎn)是什么？有次散步的機(jī)會(huì)，他終于得到了靈感。那就是雖然自己沒辦法做出特別厲害的作品，但踏踏實(shí)實(shí)的繪制圖形卻是可行的。
當(dāng)意識(shí)到了這一點(diǎn)之后，于是在一次研究宋體（明朝體）的過程中，就產(chǎn)生了做一本書去記錄這段悠久歷史的想法。他想通過探索歷史的過程，去尋找屬于自己的興趣點(diǎn)。
當(dāng)從宏觀角度看待一段歷史的進(jìn)程，通過推演，人們總能或多或少看到未來的一些可能性。通過研究書籍的過去，會(huì)發(fā)現(xiàn)最初的書籍形態(tài)起源與泥板，也就是說，從人類發(fā)展初期就存在了書的概念。
就是這樣一步步的研究，信息的宏觀樣貌，如果從宏觀的視角來看待的話，會(huì)發(fā)現(xiàn)人們通常能夠了解到的信息其實(shí)并不多，當(dāng)從更高的維度看到相同的事件時(shí)，是能夠展現(xiàn)出事物本質(zhì)的。所以在之后做視覺圖表作品時(shí)，中野就開始有意識(shí)的展現(xiàn)從整體到局部之間的相互對(duì)照。
我們接下來一起看看中野老師還有哪些精彩的作品吧！
以信息結(jié)構(gòu)和文章脈絡(luò)的可視化設(shè)計(jì)為主題，探索各個(gè)領(lǐng)域中平面設(shè)計(jì)的可能性。
△ 這是中野老師從 2012 年到 2013 年期間，為建筑雜志設(shè)計(jì)的封面，因?yàn)槭窃驴?，所以在兩年時(shí)間里，一共做了 24 本。
雜志的內(nèi)容主要和災(zāi)害相關(guān)，比如第一版，是關(guān)于日本東北地區(qū)的一些內(nèi)容、第二本是關(guān)于海嘯的內(nèi)容，除此之外，還有關(guān)于建筑產(chǎn)業(yè)、能源、以及關(guān)于福島災(zāi)難重建等問題。
每本雜志都有各自的特征，數(shù)據(jù)來源主要由政府以及大學(xué)中的一些數(shù)據(jù)研究者們提供。當(dāng)接收到這些信息之后，中野老師需要甄別哪些內(nèi)容是需要保留的，哪些是需要?jiǎng)h減的。在這個(gè)過程中，不斷的思考”怎樣才能將這些數(shù)據(jù)清晰的傳達(dá)給讀者”這類問題。
這個(gè)展覽是 2018 的時(shí)候，中野老師在印刷博物館策劃的一個(gè)天文學(xué)與印刷的展覽 。主要展覽的是 15 世紀(jì)到 18 世紀(jì)的書籍和印刷物。希望能夠以全新的視角，向大家展現(xiàn)天文學(xué)與印刷之間的關(guān)系。畫面中左上角的同心圓，是哥白尼提出的太陽(yáng)中心說，從此人們開始以全新的視野觀察這個(gè)世界。
這是這個(gè)展覽的宣傳單頁(yè)，博物館的宣傳單頁(yè)通常都是 A4 尺寸的，最初老師設(shè)計(jì)了八張相同的傳單頁(yè)面。
隨后最終通過局部特寫的方式，構(gòu)建出了八種不同的傳單樣式。如果全部收集完全，可以拼接成完成了一個(gè)大畫面。
從天文學(xué)和印刷術(shù)之間的關(guān)系開始發(fā)展聯(lián)想，結(jié)合了天文學(xué)，哲學(xué)、數(shù)學(xué)等等一些學(xué)科，統(tǒng)一展現(xiàn)出了宇宙的這個(gè)概念。老師分別從三個(gè)角度思考這個(gè)問題，分別是“秩序”“整合”“規(guī)格”。
如果把文字去掉，我們會(huì)看到這樣一張插圖，我們來分析一下為什么需要做成這個(gè)樣子。
這里的橫軸代表著時(shí)間，豎軸代表著規(guī)模，畫面頂部展現(xiàn)的是關(guān)于宇宙的圖像，而下方主要以人的視角，展現(xiàn)了地球的圖像。學(xué)術(shù)本身是建立在各種各樣的理論之上，前人建立起的理論，可能會(huì)被后來者推翻重建，逐步形成了我們今天的天文學(xué)。
這個(gè)展覽中會(huì)展示各種各樣的宇宙學(xué)理論體系，通過各種各樣的宇宙論，去展現(xiàn)這個(gè)世界的演變。讓人們隨著時(shí)間的進(jìn)程，在各種學(xué)術(shù)體系中了解了文明的變遷，通過圖像讓觀賞者提前在腦海中呈現(xiàn)出視覺化的內(nèi)容。也就是說，我們從看到這個(gè)宣傳畫面的那一刻起，這個(gè)展覽的內(nèi)容就已經(jīng)開始了。
這個(gè)展會(huì)的名字叫《改變世界的信息》，畫面長(zhǎng)度有 12 米左右，這個(gè)畫面是展會(huì)的入口處。從數(shù)據(jù)我們可以看到，受到貧困和災(zāi)難的人群，占據(jù)著百分之七十的人群。
中野老師針對(duì)這一點(diǎn)，將世界各個(gè)地區(qū)以及不同的國(guó)家，把其受災(zāi)的程度和數(shù)據(jù)都集中到了一塊。分別是水資源、糧食、能源、醫(yī)療、住房、交通、識(shí)字率、通訊等問題。一共有一百多個(gè)國(guó)家。
通過這個(gè)圖，我們會(huì)發(fā)現(xiàn)這其中每一個(gè)問題都是相互牽制，相互影響的。比如說水的問題就和所有的內(nèi)容都有關(guān)系。整個(gè)圖標(biāo)并非是想要解決某些問題，而是希望人們?cè)诳吹剿鼈儠r(shí)，能夠從中發(fā)現(xiàn)到一些問題。
通過人們的議論，去碰撞出全新的思考。由此可以知道，圖表設(shè)計(jì)其實(shí)是對(duì)社會(huì)非常有幫助的設(shè)計(jì)領(lǐng)域。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來源：花瓣 作者：研習(xí)社
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
但是，究竟如何才能結(jié)合網(wǎng)頁(yè)/產(chǎn)品特色和用戶的真實(shí)需求， 將頁(yè)面視覺內(nèi)容層級(jí)化， 從而提供更加優(yōu)質(zhì)的用戶體驗(yàn)，實(shí)現(xiàn)與用戶的互動(dòng)， 最終促成產(chǎn)品購(gòu)買呢？下面小編就結(jié)合最新且具有極佳視覺層次感的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例分析和介紹視覺內(nèi)容組織技巧，以及在原型化這些網(wǎng)頁(yè)設(shè)計(jì)的過程中（結(jié)合小編最愛的一款又快又簡(jiǎn)單的原型工具M(jìn)ockplus）需要注意的原型設(shè)計(jì)技巧：
1.利用界面元素尺寸大小建立層級(jí)結(jié)構(gòu)
界面元素（例如文字，圖片或形狀等）尺寸越大，越突出，越容易吸引用戶的注意。所以，在具體的網(wǎng)頁(yè)界面設(shè)計(jì)中，設(shè)計(jì)師可以通過有梯度的尺寸變化，創(chuàng)建頁(yè)面信息的層級(jí)關(guān)系。當(dāng)然內(nèi)容重要性上，也應(yīng)該是與尺寸大小成正比的（即越大越重要）。
如圖，利用文字的尺寸大小，體現(xiàn)網(wǎng)頁(yè)信息的層級(jí)。
注意：尺寸大小也要控制在用戶能夠接受的范圍內(nèi)
太大，能夠展示的內(nèi)容有限。太小，易讀性差，也會(huì)比較繁雜。
原型設(shè)計(jì)技巧：
在利用Mockplus (一款具有豐富組件庫(kù)和圖標(biāo)庫(kù)的原型工具)創(chuàng)建網(wǎng)頁(yè)原型時(shí)，絕大部分的組件都是可以簡(jiǎn)單通過寬高屬性或拖拉邊框兩種方式調(diào)整其尺寸，輕松創(chuàng)建直觀的層次結(jié)構(gòu)。
如圖，Mockplus允許用戶簡(jiǎn)單通過寬高屬性或拖拉邊框的方式調(diào)整組件尺寸大小。
2.利用界面元素明暗，陰影以及透明度的不同，體現(xiàn)簡(jiǎn)單層級(jí)
如白底黑字般，同類元素，同一色彩，不同的明暗，陰影以及透明度，也可體現(xiàn)簡(jiǎn)單的層級(jí)關(guān)系。當(dāng)然，在沒有過多顏色的參與下，不同文字，圖片等多種的頁(yè)面元素結(jié)合透明度，陰影以及明暗，也可使整款設(shè)計(jì)極具簡(jiǎn)約風(fēng)和層次感。（點(diǎn)擊鏈接更多的簡(jiǎn)約風(fēng)網(wǎng)頁(yè)設(shè)計(jì)技巧）
如圖，文字明暗，結(jié)合尺寸變化，讓頁(yè)面層級(jí)更加清晰簡(jiǎn)約：
原型設(shè)計(jì)技巧：
而在這一方面，小編發(fā)現(xiàn)Mockplus提供了專門透明度屬性，可以根據(jù)層級(jí)設(shè)計(jì)需求，修改屬性數(shù)值進(jìn)行設(shè)置。
如若，需要添加元素陰影，也可輕松通過組件的重疊實(shí)現(xiàn)。
如圖，“圖片”與“形狀”組件的組合，實(shí)現(xiàn)陰影的添加。
3.利用色彩，劃分頁(yè)面層級(jí)
色彩，作為設(shè)計(jì)師最常使用的視覺層次工具，也為他們創(chuàng)建極富層級(jí)感的網(wǎng)頁(yè)設(shè)計(jì)發(fā)揮著舉足輕重的作用。而具體的設(shè)計(jì)技巧，大家可以參考以下幾點(diǎn)：
首先，色彩明亮的頁(yè)面元素更容易從相對(duì)柔和的元素中脫穎而出。如圖：
如圖，明亮的紅色和黃色更易從相對(duì)較柔和的粉色背景中脫穎而出。
而且，某些色彩，尤其是某些主題配色方案的選擇，對(duì)于確定網(wǎng)頁(yè)的整體基調(diào)，吸引用戶注意，作用也非常明顯。例如，藍(lán)色，一般代表平靜祥和，適合一些日常事物管理類軟件選擇。而紅色，則代表熱情喜氣，適合一些節(jié)日相關(guān)購(gòu)物促銷類軟件選擇。
如圖，利用紅色突出網(wǎng)頁(yè)促銷信息。
其次，色彩飽和度的梯度變化，也可體現(xiàn)直觀而豐富的層次結(jié)構(gòu)。
同一色彩，飽和度的梯度變化，也可幫助展現(xiàn)網(wǎng)站元素的層次結(jié)構(gòu)。如圖：
最后，色彩模塊，對(duì)于體現(xiàn)界面元素的邏輯關(guān)系，作用也是顯而易見
存在同一邏輯關(guān)系的各個(gè)頁(yè)面元素就近放置在同一色彩模塊，可以讓頁(yè)面組織結(jié)構(gòu)更加清晰，易于用戶快速查看相關(guān)內(nèi)容。
如圖，利用色彩模塊，更直觀地劃分功能區(qū)。
原型設(shè)計(jì)技巧：
而這一方面，Mockplus提供了非常強(qiáng)大的色彩選擇器，設(shè)計(jì)師們可以簡(jiǎn)單點(diǎn)擊實(shí)現(xiàn)色彩的選擇和添加。其色彩收藏功能，也為以后復(fù)用和保持整款設(shè)計(jì)配色的一致性提供了可能。
當(dāng)然，結(jié)合“形狀”組件，為頁(yè)面添加豐富的功能色塊，以及添加“鼠標(biāo)懸停時(shí)”或“點(diǎn)擊時(shí)”的簡(jiǎn)單色彩交互狀態(tài)，也不是難事。
如圖，添加色塊劃分界面功能結(jié)構(gòu)。
4.利用頁(yè)面布局，展現(xiàn)網(wǎng)頁(yè)層級(jí)結(jié)構(gòu)
頁(yè)面布局也是設(shè)計(jì)師們常用的視覺工具之一。一方面，同一網(wǎng)站，內(nèi)部各個(gè)頁(yè)面可以根據(jù)軟件或產(chǎn)品展示內(nèi)容需求，采用多樣的布局模式，增加頁(yè)面的多變性和可讀性。另一方面，也可直接在不同頁(yè)面采用重復(fù)的頁(yè)面布局，方便幫助用戶形成一定的閱讀習(xí)慣，快速有效的查詢需要的信息。
而具體單個(gè)頁(yè)面的布局模式，大家可以嘗試以下的方式實(shí)現(xiàn)：
*利用網(wǎng)格劃分不同頁(yè)面模塊
網(wǎng)格是公認(rèn)的劃分頁(yè)面功能模塊的工具之一。而它在組織界面視覺內(nèi)容方面，作用也不可小視。加之，結(jié)合各個(gè)網(wǎng)格的色彩變化，也能使整個(gè)頁(yè)面更加炫酷直觀。如下圖：
*利用位置不同體現(xiàn)邏輯關(guān)系
同一邏輯關(guān)系（比如同類，從屬，因果等）或相近/相關(guān)的元素放在同一或并列的網(wǎng)頁(yè)位置或模塊內(nèi)，更易于用戶瀏覽所需頁(yè)面信息。
當(dāng)然，每個(gè)邏輯關(guān)系內(nèi)，結(jié)合大小標(biāo)題和列表進(jìn)行展示，層級(jí)關(guān)系會(huì)更加深入清晰。
*利用點(diǎn)線
網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師不僅可以直接使用點(diǎn)線標(biāo)出需要強(qiáng)調(diào)的內(nèi)容，還可以利用點(diǎn)線劃分頁(yè)面板塊和布局。
如圖，通過位置的不同體現(xiàn)內(nèi)容之間的邏輯關(guān)系。同時(shí)，利用線條劃分頁(yè)面結(jié)構(gòu)和布局。
*利用對(duì)齊方式的不同
文字，圖片以及相關(guān)元素的對(duì)齊方式，也是體驗(yàn)不同層級(jí)結(jié)構(gòu)的重要工具。
總之，頁(yè)面布局也可幫助設(shè)計(jì)師們創(chuàng)建更具美感和層次感的網(wǎng)頁(yè)設(shè)計(jì)。
原型設(shè)計(jì)技巧：
在使用Mockplus時(shí)，設(shè)計(jì)師可簡(jiǎn)單使用“快速格子+自動(dòng)填充”的功能組合，實(shí)現(xiàn)界面網(wǎng)格的輕松添加。而且，在具體的設(shè)計(jì)過程中，對(duì)齊方式，標(biāo)尺以及參考線等工具的使用，也可使網(wǎng)頁(yè)布局設(shè)計(jì)更加簡(jiǎn)便快捷。
如圖，利用Mockplus的快速格子和自動(dòng)填充功能制作網(wǎng)頁(yè)網(wǎng)格，劃分界面功能結(jié)構(gòu)。
5.利用留白和間距，突出界面視覺內(nèi)容
留白的巧妙運(yùn)用，能夠非常有效地突出頁(yè)面信息。而頁(yè)面內(nèi)部元素之間，保持適當(dāng)?shù)拈g距，讓彼此之間的相互聯(lián)系而不“擁擠雜亂”，也是吸引用戶注意的不錯(cuò)策略。如圖：
6.利用對(duì)比，凸顯網(wǎng)頁(yè)層級(jí)結(jié)構(gòu)關(guān)系
以上所提及的各種視覺組織工具，例如尺寸，色彩，明暗，間距等等，同類或不同類之間的鮮明對(duì)比，也可以讓頁(yè)面視覺上更加美觀而豐富，同時(shí)體現(xiàn)元素之間的結(jié)構(gòu)層次關(guān)系。
如圖，利用色彩的強(qiáng)烈對(duì)比，突出頁(yè)面層級(jí)。
此外，頁(yè)面元素的相互疊加，清晰度，以及細(xì)節(jié)展示程度的對(duì)比，也能有效地凸顯網(wǎng)頁(yè)內(nèi)容的重要性層級(jí)。
如圖，靠前的圖片和文字應(yīng)該更加重要，清晰，細(xì)節(jié)也應(yīng)更豐富，從而方便用戶識(shí)別讀取，避免層次混亂。
7.采用不同的界面風(fēng)格，打造獨(dú)特的網(wǎng)頁(yè)視覺層級(jí)
當(dāng)然，并不是說設(shè)計(jì)師就必須通過以上的設(shè)計(jì)工具展示網(wǎng)頁(yè)重要性層級(jí)結(jié)構(gòu)。實(shí)際上，結(jié)合設(shè)計(jì)師特有創(chuàng)意，獨(dú)特紋理（texture），圖形或圖像元素等，打造出具有設(shè)計(jì)師獨(dú)特風(fēng)格的視覺層級(jí)，也會(huì)是不錯(cuò)的嘗試。如下圖：
總之，不管是否使用以上的設(shè)計(jì)工具，結(jié)合設(shè)計(jì)師創(chuàng)意，打造獨(dú)具一格的視覺層級(jí)風(fēng)格，都是不錯(cuò)的設(shè)計(jì)理念。
原型設(shè)計(jì)技巧：
而在這一點(diǎn)上，Mockplus提供了很多優(yōu)質(zhì)功能，幫助設(shè)計(jì)師隨心設(shè)計(jì)，并簡(jiǎn)單快捷的原型化，測(cè)試和迭代這些天馬行空的創(chuàng)意。
比如，其團(tuán)隊(duì)協(xié)作和團(tuán)隊(duì)管理功能，方便設(shè)計(jì)師更加高效地完成設(shè)計(jì)。其8種演示和分享方式，例如導(dǎo)出圖片，HTML以及演示包等等，為設(shè)計(jì)師根據(jù)切實(shí)需要，選擇適當(dāng)?shù)姆绞綔y(cè)試和分享相關(guān)設(shè)計(jì)提供了便利。
此外，其組件樣式庫(kù)，也為保存和分享需要的組件樣式并隨時(shí)復(fù)用提供了可能。
8.分析用戶需求和網(wǎng)頁(yè)瀏覽模式，優(yōu)化頁(yè)面內(nèi)容和位置
在進(jìn)行網(wǎng)頁(yè)界面層級(jí)結(jié)構(gòu)化的過程中，并不是毫無(wú)章法，盲目的隨意添加或突出某個(gè)部分，而是需要分析用戶行為，根據(jù)用戶需求等級(jí)進(jìn)行相應(yīng)結(jié)構(gòu)層次的劃分。否則，再怎么賦有層次感，用戶也會(huì)因?yàn)檎也坏叫枰臇|西，莞爾離開。
此外，除了根據(jù)用需求決定哪些內(nèi)容需要放在最緊要，最突出的位置，以吸引用戶。同時(shí)還需要根據(jù)用戶瀏覽網(wǎng)頁(yè)時(shí)的閱讀模式，分析重要內(nèi)容的頁(yè)面位置。
根據(jù)美國(guó)著名網(wǎng)站設(shè)計(jì)工程師Nielsen Norman Group研究表示，用戶總是在網(wǎng)頁(yè)瀏覽中慣用“F”或“Z”型閱讀模式，即用戶常常是從左到右，開頭結(jié)尾詳細(xì)閱讀，而中間部分則根據(jù)網(wǎng)頁(yè)或文章大小標(biāo)題結(jié)構(gòu)，選擇性閱讀的模式。如下圖：
那么，網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師就需要注意頁(yè)面首尾內(nèi)容的趣味性和實(shí)用性，以及中間主體部分注意大小標(biāo)題簡(jiǎn)潔明了，建立清晰的框架層次結(jié)構(gòu)。
總之，無(wú)論是用戶行為畫像，還是用戶瀏覽模式分析，最終都是希望能夠根據(jù)用戶需求，更加合理的安排和分布頁(yè)面內(nèi)容，直觀清晰，易識(shí)別。
9.其他設(shè)計(jì)工具
而其它視覺設(shè)計(jì)工具，例如界面文本方面，文本字體，排版，對(duì)齊方式等等，也可突出頁(yè)面的層級(jí)關(guān)系。
原型設(shè)計(jì)技巧：
如若設(shè)計(jì)師希望通過網(wǎng)頁(yè)文本的尺寸，字體，顏色，排版以及對(duì)齊方式等實(shí)現(xiàn)框架結(jié)構(gòu)的構(gòu)建時(shí)，Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實(shí)現(xiàn)。而且，適當(dāng)?shù)慕Y(jié)合一定的交互設(shè)計(jì)，也可使整款設(shè)計(jì)更具吸引力。
結(jié)語(yǔ)：
當(dāng)然，層次結(jié)構(gòu)化不僅能讓網(wǎng)頁(yè)更加直觀清晰，賞心悅目。而且，具有一定局限性的Android 或iOS app，例如頁(yè)面尺寸的限制，設(shè)備屏幕的限制，響應(yīng)與否的限制等等，更需要清晰的層次結(jié)構(gòu)，讓頁(yè)面擺脫混亂繁雜，吸引更多用戶點(diǎn)擊使用。而這方面，也同樣適用以上所有設(shè)計(jì)技巧。
總之， 無(wú)論如何， 及時(shí)地將各種設(shè)計(jì)想法，通過一款實(shí)用且強(qiáng)大的原型工具（比如以上介紹到的Mockplus）, 轉(zhuǎn)化成直觀可視的原型，更進(jìn)一步的測(cè)試和迭代，才是創(chuàng)建真正美觀實(shí)用，深受用戶喜愛的web/app的必經(jīng)之道。
總之，希望以上介紹的相關(guān)層次結(jié)構(gòu)設(shè)計(jì)技巧和原型設(shè)計(jì)技巧能對(duì)你有所啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每當(dāng)我看到一個(gè)漂亮，優(yōu)雅并且簡(jiǎn)潔美觀的界面，就會(huì)忍不住保存下來?，F(xiàn)在，我已經(jīng)收集了100多個(gè)美不勝收的UI 界面。在一次次觀摩，欣賞和學(xué)習(xí)后，我發(fā)現(xiàn)這些界面有很多共同點(diǎn)。可究竟是什么讓我對(duì)它們一見鐘情呢？現(xiàn)在我找到了答案，是色彩。
本文中，結(jié)合自身經(jīng)歷，我總結(jié)了一些UI 設(shè)計(jì)配色技巧。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計(jì)師，但是我保證，這些為你量身打造的UI 設(shè)計(jì)配色技巧，定會(huì)讓你受益匪淺。
1. 色彩的魔力
色彩是會(huì)說話的，甚至可以像語(yǔ)言一樣強(qiáng)大。回想以下，每當(dāng)你初見一個(gè)網(wǎng)站或產(chǎn)品，給你留下第一印象的是什么呢？是視覺外觀，而視覺外觀很大程度上是取決于色彩運(yùn)用。
那么，在UI設(shè)計(jì)中，色彩究竟可以做些什么？
1）反映品牌的內(nèi)涵和品質(zhì)
顏色可以為品牌設(shè)定基調(diào)。 CCICOLOR的一項(xiàng)研究表明，用戶在評(píng)估一款在線商品時(shí)，只需花費(fèi)短短90秒，而判斷的依據(jù)高達(dá)62％至90％將取決于配色方案。
2）實(shí)現(xiàn)更佳的用戶體驗(yàn)
色彩的有效運(yùn)用能提升整體美感，提供更優(yōu)的閱讀體驗(yàn)，創(chuàng)造清晰和諧的風(fēng)格。
3）影響購(gòu)買決策
根據(jù)Kissmetrics的說法，產(chǎn)品的視覺外觀是影響消費(fèi)者購(gòu)買決策的首要因素。此外，QuickSprout的研究也表明，90％的產(chǎn)品評(píng)估都與顏色有關(guān)。Neil Patel曾寫到，“顏色在你購(gòu)買特定產(chǎn)品的原因中占據(jù)85％的分量”。正因如此，顏色已成為當(dāng)今重要的營(yíng)銷手段之一。
2. 色彩的基本概念
色彩被長(zhǎng)久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨(dú)特的語(yǔ)言和象征。解讀色彩的語(yǔ)言，請(qǐng)看下表：
3. UI 設(shè)計(jì)配色技巧
1） 色彩使用也講究“天時(shí)地利人和”
存在即合理，沒有哪一個(gè)色彩本身就是丑陋和不具備美感的，只能說，如果我們錯(cuò)誤的使用了色彩，那么它的美一旦被破壞，就只剩下丑陋和別扭了。
想象一下，如果麥當(dāng)勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對(duì)他們的炸雞充滿饑腸轆轆的感覺嗎？女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對(duì)，為什么？因?yàn)檫@樣會(huì)讓她們看起來性感迷人。
不同的顏色傳達(dá)不同的含義和感覺。如何明智地進(jìn)行選取和搭配呢？這里請(qǐng)注意5點(diǎn)：選取合適的顏色，運(yùn)用于合適的設(shè)計(jì)場(chǎng)景，注意時(shí)間變化，關(guān)注目標(biāo)用戶，明確想要達(dá)到的目的。
這里請(qǐng)認(rèn)真查看上圖，明確顏色的意義。但如果你非要冒險(xiǎn)追求獨(dú)一無(wú)二的設(shè)計(jì)，那么祝您好運(yùn)。
2）留心藍(lán)色
為什么專門談藍(lán)色？藍(lán)色不是海洋天空的專屬色，藍(lán)色也是UI 設(shè)計(jì)的青睞色。
看看你常用的一些比較有名的APP或者網(wǎng)站，比如Facebook，Safari以及辦公軟件等等。有什么發(fā)現(xiàn)呢？是的，它們的界面都是藍(lán)色，各種層次的藍(lán)色。
有研究表明，藍(lán)色是唯一一種讓女性和男性都鐘愛的顏色。藍(lán)色幾乎無(wú)處不在，大自然中，各網(wǎng)站的UI界面，服飾衣物等，藍(lán)色隨處可見。包括我此刻寫入文章的Microsoft Word，界面也是藍(lán)色的。
藍(lán)色無(wú)疑是一種安全的顏色，它能最大程度上獲得用戶的信任并被廣泛接受，藍(lán)色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇，請(qǐng)用藍(lán)色。
3）背景色和元素之間的色彩變化技巧
看看以下的界面：
（來源）
這里暫且不談這又是關(guān)于藍(lán)色的UI界面，讓我們專注于它的色彩變化。主題顏色是藍(lán)色，其他元素是較暗的藍(lán)色和更明亮的藍(lán)色。整體看上去，各層次的顏色平衡和諧且又脈絡(luò)清晰。
怎么做到自然而又極具美感的色彩變化？
只是一個(gè)簡(jiǎn)單的黃金法則：通過降低亮度和增加飽和度可以使色彩變得更深；通過增加亮度和降低飽和度來使色彩變得更淺。
4）色彩組合的黃金比例——（6：3：1）規(guī)則
在設(shè)計(jì)時(shí)，色彩組合必不可免。組合顏色很容易，但組合后如何避免色彩混亂和累贅？如何既能夠不顯得單調(diào)又展示設(shè)計(jì)感？
記住二個(gè)原則：
第一個(gè)：6：3：1規(guī)則
60％+ 30％+ 10％的比例是為了平衡顏色。這個(gè)公式能創(chuàng)造出一種平衡的感覺，并能提供更佳的用戶體驗(yàn)，可以讓用戶的實(shí)現(xiàn)從一個(gè)點(diǎn)舒緩的移動(dòng)到另一個(gè)點(diǎn)。
第二個(gè)：最多3個(gè)原色
這個(gè)規(guī)則與黃金（6：3：1）規(guī)則相匹配。這是避免混亂并保持平衡的最佳辦法。
5）顏色組合和互補(bǔ)
提供和諧的配色方案時(shí)，需要注意些什么？在這個(gè)過程中需要考慮以下方面：
第一， 色調(diào)
您可以在色環(huán)上生成單個(gè)“色度”的許多變體。通過添加白色，黑色和灰色來生成不同的色調(diào)。
實(shí)現(xiàn)平衡色調(diào)，最簡(jiǎn)單的方案是單色（單色）方案。
第二， 對(duì)比
顏色的不同對(duì)比可以喚起不同的情感反應(yīng)。色輪上相對(duì)的兩種顏色可以提供最高的對(duì)比度，比如黑色和白色。強(qiáng)烈的對(duì)比度可以讓人集中精力，并且產(chǎn)生緊張的心情; 柔和的對(duì)比度則適用于輕松、休閑的UI設(shè)計(jì)。
注意：對(duì)比的使用不要過火，這樣容易使用戶產(chǎn)生困擾。
6）黑白色搭配不過時(shí)
黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。黑色是一個(gè)很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對(duì)比色，如果合理的使用黑色配合白色，會(huì)營(yíng)造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面。
7）從自然和藝術(shù)中獲得靈感
自然與藝術(shù)是靈感的主要源泉。抬頭看看天空，你會(huì)發(fā)現(xiàn)藍(lán)色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計(jì)更加切合用戶的審美，非常自然，不帶刻意的痕跡。而藝術(shù)是對(duì)自然的直接反映，是非常寶貴的資源，值得好好利用。
8）顏色心理學(xué) – 避免性別誤區(qū)
或許天生如此，女人不喜歡灰色，橙色和棕色。她們鐘愛藍(lán)色，紫色和綠色。而男人不喜歡紫色，橙色和棕色。男人喜歡藍(lán)色，綠色和黑色。只要記住，當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時(shí)，選擇能傳達(dá)男性氣概的色彩。如果你把運(yùn)動(dòng)類App的界面使用了女性色彩，結(jié)果可想而知。
還有一個(gè)誤區(qū)，人們以為粉色是女性的喜愛，但結(jié)果也許會(huì)讓你大跌眼鏡。
4. 工具和模板
這里我總結(jié)了一些有助于UI配色的工具和模板，希望對(duì)您有所幫助：
1）Coolors.co
Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調(diào)色板，還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。
2）Mockplus
Mockplus是一款非常方便的UI / UX設(shè)計(jì)工具，其啟動(dòng)頁(yè)面加入了配色精美的示例項(xiàng)目和模板，可直接導(dǎo)入桌面客戶端。其編輯器中，可對(duì)組件進(jìn)行多樣的色彩設(shè)置和編輯，內(nèi)部也包含完整的顏色選擇器，支持導(dǎo)入圖片和GIF，如果您是要在原型設(shè)計(jì)過程中產(chǎn)出精美的UI 界面，Mockplus能滿足您的需求。
3）Paletton
Paletton有點(diǎn)類似于Kuler，但又不僅限于5個(gè)色調(diào)。當(dāng)您已經(jīng)擁有原色并想要使用其他色調(diào)時(shí)，Paletton將會(huì)是您很好的選擇，它可以創(chuàng)建協(xié)同色彩組合工作，是強(qiáng)大的UI調(diào)色板。
4）Check my Color
Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具，也是一款能夠檢查不同網(wǎng)頁(yè)自己的顏色亮度和對(duì)比度差異的工具。
5）Chinaz
該網(wǎng)站提供了豐富的配色資源，包括在線調(diào)色板，網(wǎng)頁(yè)常用色彩，web安全色以及網(wǎng)頁(yè)顏色選擇器，會(huì)使您UI 配色的一個(gè)很好的幫助。建議對(duì)色彩運(yùn)用比較初級(jí)的設(shè)計(jì)師可以做一個(gè)參考。
注意：可用性是關(guān)鍵
創(chuàng)建華麗的UI界面永遠(yuǎn)不是最終的目標(biāo)。提供卓越的用戶體驗(yàn)，為用戶的生活增添快樂和幸福才是我們?cè)O(shè)計(jì)的目的。因此，在UI 設(shè)計(jì)配色上，每位UI設(shè)計(jì)師應(yīng)該記住，界面應(yīng)該是符合高度實(shí)用和并且清晰明了的。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
為什么數(shù)據(jù)可視化ui設(shè)計(jì)非常重要?
數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復(fù)雜信息。
一個(gè)優(yōu)秀的數(shù)據(jù)可視化界面是什么樣子的？
今天小編就帶給大家一組超酷數(shù)據(jù)可視化UI設(shè)計(jì)，風(fēng)格多樣，供參考。
文章來源：快資訊 作者：ZAKER汽車
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每天學(xué)習(xí)一點(diǎn)，你就進(jìn)步一點(diǎn)，不斷向上成長(zhǎng)，成功沒有偶然，也沒有理所當(dāng)然，能夠成為一名優(yōu)秀UI設(shè)計(jì)師的人不是因?yàn)樗麄冇卸嘈疫\(yùn)，也不是因?yàn)樗麄兲熨x有多高有多么強(qiáng)的悟性，而是因?yàn)樗麄円恢痹谂Α?
只不過一般人只看到別人的成功和輝煌，卻往往忽略了別人背后辛勤的努力和付出，所以，在不服氣或者眼紅之時(shí)，才會(huì)用偶然來加以解釋。只有不斷學(xué)習(xí)提升，才能讓自己變得更有價(jià)值!
以下是周老師給大家講解UI設(shè)計(jì)的幾種技能提升技巧。學(xué)會(huì)了可以讓你快速達(dá)到事半公倍的效果。
1. 注入生命
無(wú)論是登錄屏幕還是加載消息，用戶都可以從這些小細(xì)節(jié)中獲得樂趣。這就是為什么像Old Spice和Geico這樣的公司擁有如此知名品牌的原因。通過在他們的營(yíng)銷中注入幽默感和個(gè)性化的設(shè)計(jì)，他們創(chuàng)造了更令人難忘的廣告和內(nèi)容。
MailChimp用戶體驗(yàn)總監(jiān)Aarron Walter說：“我們已經(jīng)發(fā)現(xiàn)在副本中加入幽默、個(gè)性，以及許多塞進(jìn)工作流的復(fù)活節(jié)彩蛋都可以把原本平凡的任務(wù)變成人們期待的體驗(yàn)，有時(shí)甚至是錯(cuò)過的體驗(yàn)?！?
將生命注入復(fù)制中，這與說“正在加載...”與“我們訓(xùn)練有素的團(tuán)隊(duì)正在努力做到的”是有區(qū)別的。這是出乎意料的，并為你的用戶提供了一點(diǎn)娛樂。
好的文案并不一定意味著它必須幽默。它只是意味著寫一篇引人入勝、值得一讀的文章。當(dāng)然，在一些領(lǐng)域，如，醫(yī)院、政府等地的應(yīng)用是不合適的。
Reddit的聯(lián)合創(chuàng)始人Alexis Ohanian在《Tools of Titans that I loved》中說了一些我非常喜歡的一句話：“花點(diǎn)時(shí)間使它更具人性化，或者(取決于你的品牌)更有趣、更不同、或者更多。這是值得的，這就是我的挑戰(zhàn)?！?
在你去設(shè)計(jì)你的下一個(gè)產(chǎn)品時(shí)，請(qǐng)考慮如何將體驗(yàn)與引人入勝或有趣的副本結(jié)合在一起。
2. 放入一些圖標(biāo)和表情符號(hào)
添加表情符號(hào)和圖標(biāo)可以幫助快速描述元素的功能。就像是當(dāng)用戶看到放大鏡圖標(biāo)時(shí)，可以立即識(shí)別出他們可以通過單擊來搜索內(nèi)容。
我喜歡Pieter Levels如何利用他的網(wǎng)站NomadList上的表情符號(hào)來使其更具吸引力和用戶友好性。這是使UI更具視覺吸引力的簡(jiǎn)單但有效的方法。
除此之外，關(guān)于這一點(diǎn)沒有太多要說的了，不要過度使用它，也不要通過嘗試過度創(chuàng)意來重新發(fā)明輪子。用戶認(rèn)識(shí)到某些元素具有全局意義。因此，請(qǐng)勿通過干擾用戶熟悉的內(nèi)容來使用戶感到困惑，盡可能嘗試使用已有的約定。一個(gè)用戶圖標(biāo)代表一個(gè)用戶配置文件，UI設(shè)計(jì)的幾種技能提升技巧https://www.aaa-cg.com.cn/ui/2998.html?seo1一個(gè)“+”圖標(biāo)代表添加，一個(gè)購(gòu)物車代表購(gòu)物車，一個(gè)齒輪代表設(shè)置，等等。
下面是一些我最喜歡的地方，你可以在那里找到圖標(biāo)和表情符號(hào):
Emojione
Icons8
BoxIcons
Feather
Material
3. 通過插圖使你的產(chǎn)品更具人性化
插圖使你能夠以輕松愉快的方式傳達(dá)復(fù)雜的信息。
在我們還小的時(shí)候，我們就已經(jīng)接受過將視覺與文字和思想相關(guān)聯(lián)的培訓(xùn)。你見過沒有插圖的兒童讀物嗎?
添加插圖可以幫助緩解心情并平衡界面。插圖可以吸引用戶的注意力，并使應(yīng)用程序的各個(gè)方面更易于理解。
但是，更重要的是，插圖要有目的性，并用作內(nèi)容的補(bǔ)充，而不是替代。插圖應(yīng)重點(diǎn)突出，并提供對(duì)UX的改進(jìn)，而不是干擾操作。與插圖的顏色和樣式保持一致也很重要，這樣它們就不會(huì)顯得格格不入。
4. 添加一個(gè)黑暗模式選項(xiàng)
根據(jù)你正在開發(fā)的應(yīng)用程序，添加深色主題選項(xiàng)可以為像我這樣生活在深色模式下的用戶提供安慰。黑暗模式對(duì)眼睛更友好。
在黑暗模式下進(jìn)行設(shè)計(jì)與在明亮模式下進(jìn)行設(shè)計(jì)沒有太大不同。它所需要的只是一個(gè)不同的調(diào)色板。我建議讓用戶決定在暗模式還是亮模式之間進(jìn)行選擇-提供在兩種模式之間切換的能力將改善您的應(yīng)用程序體驗(yàn)，并允許用戶保持對(duì)其體驗(yàn)的控制。
5. 使用高質(zhì)量的圖像
應(yīng)用程序中的圖像與其他任何視覺元素一樣重要。你選擇的圖像中的視覺效果可以使UI更加生動(dòng)生動(dòng)，從而增強(qiáng)你的UI。
有很多很棒的地方可以找到高質(zhì)量的圖像。以下是一些我的最愛：
Unsplash
Pexels
Freepik
Adobe Stock
Pixabay
6. 設(shè)計(jì)有趣的404頁(yè)面
看到應(yīng)用程序中的每個(gè)事件，即使不是那么令人興奮的事件，都可以提供令人難忘的體驗(yàn)。
錯(cuò)誤狀態(tài)通常是消極的經(jīng)歷，但你可以通過提供一些個(gè)性或樂趣來將其轉(zhuǎn)變?yōu)榉e極的經(jīng)歷。
我最喜歡的示例是Google Chrome瀏覽器的“沒有互聯(lián)網(wǎng)”錯(cuò)誤屏幕。他們提供了所有必要的信息，以告知用戶如何修復(fù)它，而且還提供了T-Rex無(wú)盡的跑步游戲。
我最喜歡的另一個(gè)是Dribbble的404頁(yè)面。它之所以出色，是因?yàn)樗梢允褂脩魠⑴c其中，并且他們可以快速返回瀏覽涂料設(shè)計(jì)。
“人們?nèi)匀辉谕铺厣习l(fā)布關(guān)于我們?cè)贖ipmunk上的錯(cuò)誤推文，這是一條錯(cuò)誤消息。他們?yōu)槭裁匆@樣做?因?yàn)檫@樣做使他們?cè)谧鲆恍┰鞠Ｍ軣o(wú)聊的事情(例如尋找航班)時(shí)顯得舉足輕重。” -Hipmunk的創(chuàng)始人Alexis Ohanian說。
元素的高度可以幫助你在應(yīng)用程序中創(chuàng)建信息的層次結(jié)構(gòu)。用戶認(rèn)為深度代表了重要性-因此，越靠近的元素優(yōu)先級(jí)越高。
但是，僅僅因?yàn)殛幱翱雌饋聿诲e(cuò)，并不意味著它們始終是不錯(cuò)的設(shè)計(jì)選擇。在設(shè)計(jì)決策時(shí)要有目的性，并在添加陰影時(shí)要記住這些元素的重要性，這一點(diǎn)很重要。
在做出任何設(shè)計(jì)決策時(shí)，你應(yīng)該始終這樣做以改善體驗(yàn)，而不僅僅是美觀。我已經(jīng)提到過幾次，因?yàn)槲蚁腴_車回家。不要忘記，應(yīng)用是為使用而設(shè)計(jì)的。不只是因?yàn)楹每床疟蝗丝吹摹?
文章來源：快資訊 作者：躺雞萌妹
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天給大家分享10個(gè)非常實(shí)用的UI設(shè)計(jì)小技巧，請(qǐng)一定要認(rèn)真看，這能幫助你的設(shè)計(jì)功底，更上一層樓。
1、對(duì)按鈕進(jìn)行排版，且風(fēng)格一定要統(tǒng)一。
排版設(shè)計(jì)也是一門學(xué)問，不一樣的排版就會(huì)有不一樣的視覺結(jié)果。如果對(duì)設(shè)計(jì)的細(xì)節(jié)不重視，有可能讓我們?cè)就昝赖漠a(chǎn)品變的平庸，比如像按鈕、Tab這些簡(jiǎn)單的界面元素也是需要排版的，因?yàn)橛脩艨赡苊刻於紩?huì)點(diǎn)擊N次。
另外，所有按鈕都需要盡可能的風(fēng)格統(tǒng)一，這樣看起來才會(huì)更美觀。
2、設(shè)計(jì)的時(shí)候要學(xué)會(huì)留白。
留白的作用在于突顯我們?cè)O(shè)計(jì)的重要內(nèi)容。
內(nèi)容元素之間的空白不僅僅是用來分隔的，這也是設(shè)計(jì)中需要注意的問題之一，比如像按鈕、導(dǎo)航條、文章內(nèi)容、標(biāo)題等等元素之間的空白都有必要關(guān)注。有效地利用空白，我們可以明確的表現(xiàn)出頁(yè)面元素之間的關(guān)系。
3、顏色主題盡量素雅、簡(jiǎn)單。
顏色主題可以說是用戶對(duì)你設(shè)計(jì)的第一印象，一旦使用的顏色過于豐富，甚至是艷俗，就會(huì)使得用戶分心。如果你不希望你的用戶在看到花里胡哨的、扎眼的 App 之后就把它刪掉，你就應(yīng)當(dāng)使用一種簡(jiǎn)單的顏色主題，給用戶一個(gè)簡(jiǎn)單大方的第 一印象。簡(jiǎn)單的顏色主題順應(yīng)扁平化設(shè)計(jì)的要求，這使得用戶在使用你的 App 時(shí)能夠有順滑的體驗(yàn)。
4、只用一種字體。
減少屏幕上字體的數(shù)量才能真正發(fā)現(xiàn)排版的力量。設(shè)計(jì)師不需要使用多種字體，只用一種字體，配上斜體、加粗、改變字號(hào)等手段，也可以分辨不同區(qū)域的內(nèi)容。
在App、移動(dòng)端和PC端網(wǎng)站中使用單一字體有助于增強(qiáng)品牌的統(tǒng)一性，優(yōu)化全平臺(tái)的體驗(yàn)。此外，用戶也更喜歡單一字體所帶來的簡(jiǎn)潔性。
5、鏈接體驗(yàn)需改善。
鼠標(biāo)移動(dòng)到超鏈接圖片，文字上面時(shí)應(yīng)該變成手型，暗示該地方是可以點(diǎn)擊的。網(wǎng)頁(yè)中文章里的關(guān)鍵字通常都標(biāo)有下劃線，提示用戶這個(gè)文字是可以點(diǎn)擊的，但是可點(diǎn)擊區(qū)域不會(huì)超過字符的寬、高范圍。設(shè)計(jì)類似這種帶有超鏈接可點(diǎn)擊區(qū)域的時(shí)候，都可以通過一些小技巧來提高可用性，比如：增加間隔，有些情況下甚至可以把鏈接轉(zhuǎn)換為塊元素。
6、分層的界面。
以前，用戶界面都是擬物化的，從事物本身選取素材，比如電子日歷長(zhǎng)得和紙質(zhì)桌面日歷一樣，把a(bǔ)pp圖標(biāo)設(shè)計(jì)成立的，按鍵音也模仿傳統(tǒng)電話。
現(xiàn)在，扁平化設(shè)計(jì)通過分層的方式來表現(xiàn)事物的深度和層次，創(chuàng)造一種更加“有形”的感覺。
這樣就更好的解決了如何做好UI設(shè)計(jì)的問題，我們的現(xiàn)實(shí)世界是3D的，以前人們習(xí)慣的界面也是擬物的，所以在進(jìn)行扁平化設(shè)計(jì)時(shí)可能會(huì)出現(xiàn)的一個(gè)風(fēng)險(xiǎn)就是“過于扁平”，導(dǎo)致用戶的不適應(yīng)，而分層設(shè)計(jì)就是解決這個(gè)問題的方法，把一個(gè)物件放在另一個(gè)物件的上方，充分利用縱向的層次，幫助用戶理清不同物件之間的關(guān)系，把注意力放在特定的位置。
7、更短的用戶操作流程。
以前，人們完成一次交易可能要跳轉(zhuǎn)好幾個(gè)頁(yè)面，而現(xiàn)在在一屏內(nèi)就可以完成這些步驟，省時(shí)省力。比如用戶在完成某項(xiàng)任務(wù)后會(huì)高亮接下來所需要進(jìn)行的操作或者自動(dòng)打開新頁(yè)面。
現(xiàn)在人們的生活節(jié)奏較快，經(jīng)常會(huì)在走路的時(shí)候用手機(jī)，因此簡(jiǎn)單快捷的操作更受歡迎。
按照這種思路設(shè)計(jì)產(chǎn)品操作流程可以幫用戶省時(shí)省力，增加轉(zhuǎn)化率并提高用戶打開App的頻率。
8、利用原型不斷改進(jìn)。
產(chǎn)品原型可以為功能的開發(fā)設(shè)計(jì)提供寶貴的指導(dǎo)。在產(chǎn)品設(shè)計(jì)的早期做出矯正，避免在產(chǎn)品基本成型時(shí)才修改，浪費(fèi)時(shí)間和精力。
通過低成本的“實(shí)驗(yàn)”，可以測(cè)試產(chǎn)品各個(gè)功能的需求，通過迭代改進(jìn)產(chǎn)品，用更少的時(shí)間開發(fā)出更好的產(chǎn)品。
9、指出產(chǎn)品適用人群而不是做成全年齡。
你是想把產(chǎn)品做成大眾化的呢還是有精確的適用人群？在產(chǎn)品定位上你需要更精確些。通過不斷了解目標(biāo)客戶的需求及標(biāo)準(zhǔn)，你能把產(chǎn)品做得更好得到更多與客戶交流的機(jī)會(huì)，并且讓客戶覺得你很專業(yè)，在這方面是獨(dú)家提供的優(yōu)質(zhì)服務(wù)。
把產(chǎn)品定位得精確的風(fēng)險(xiǎn)就是可能縮小了目標(biāo)潛在客戶的范圍，也使自身變得不那么全能。但這種做得更專業(yè)的精神卻反過來會(huì)贏得信任，權(quán)威。
10、暴露選項(xiàng)而不要將操作隱藏。
你使用的任何一個(gè)下拉框都會(huì)對(duì)用戶造成信息的隱藏而需要額外的操作才能顯示。如果這些信息是貫穿整個(gè)操作所必需的，那你最好把它展示出來做得更顯而易見一點(diǎn)。下拉框最好用在選擇日期，省份等約定俗成的地方。對(duì)于程序中重要的選項(xiàng)最好還是不要做成下拉形式。
希望以上十條技巧對(duì)你有用。
文章來源：快資訊 作者：衍果設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
從事UI設(shè)計(jì)的工作人員通常會(huì)有一種自己在做時(shí)尚行業(yè)的錯(cuò)覺，因?yàn)楹蜁r(shí)尚行業(yè)一樣，在設(shè)計(jì)的時(shí)候一定要有最新的元素，如果還在用老掉牙的設(shè)計(jì)元素，很容易就會(huì)被淘汰掉。所以這里給大家介紹兩種風(fēng)格，幫助最近頭疼設(shè)計(jì)風(fēng)格的朋友。
疊加風(fēng)格
顧名思義，疊加風(fēng)格就是通過不同元素疊加而成的，當(dāng)然，不是說我們隨便一堆東西丟在一起就是疊加風(fēng)格。疊加風(fēng)格非常在意大膽排版以及排列有序，有層次感，而這其中層次感是疊加風(fēng)格的核心。
不管是圖文疊加還是圖片之間的疊加，最終目的都是為了突出我們產(chǎn)品的重點(diǎn)，而通過我們疊加方式的不同，效果也是不一樣的。舉個(gè)簡(jiǎn)單的例子，圖片和文字相互疊加，如果文字在上方，可以很直接展現(xiàn)文字并突出文字思想。而文字在下方，圖片對(duì)文字有部分遮擋的話，就會(huì)增加神秘感，讓人想要一探究竟。
輪廓化
輪廓化簡(jiǎn)單來說就是把文字用輪廓勾勒出來，也可以理解為鏤空，通過描繪輪廓展現(xiàn)出來，這樣我們可以和實(shí)心的字體形成強(qiáng)烈的對(duì)比。
這種風(fēng)格多半和實(shí)心字體一起出現(xiàn)，當(dāng)然根據(jù)設(shè)計(jì)理念和表達(dá)方式不同，也會(huì)有單獨(dú)出現(xiàn)的情況，這種風(fēng)格講究的是設(shè)計(jì)上的細(xì)節(jié)，讓人眼前一亮的小心機(jī)，同時(shí)在層次和情緒表達(dá)上會(huì)更加的豐富，一般都是用來做封面，給用戶的視覺形成強(qiáng)烈的沖擊效果。
文章來源：快資訊 作者：春風(fēng)化娛娛
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
文章來源：快資訊 作者：曼巴怡君
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
一款A(yù)PP最先呈現(xiàn)在用戶眼前往往是從引導(dǎo)頁(yè)開始，在這個(gè)情況下，一個(gè)APP設(shè)計(jì)的好壞、使用否能吸引用戶可以在引導(dǎo)頁(yè)的設(shè)計(jì)上有第一感知。想讓APP設(shè)計(jì)更加有趣，引導(dǎo)頁(yè)設(shè)計(jì)需要遵循以下幾點(diǎn)。
②圖片信息的傳遞。AP引導(dǎo)頁(yè)設(shè)計(jì)的圖片信息，以全屏的人物圖片為主，在不同的圖片中，用戶對(duì)于人臉和具有動(dòng)感的圖片比較容易關(guān)注，而且通過圖片可以通過對(duì)用戶視覺的刺激使其很快的產(chǎn)生聯(lián)想并產(chǎn)生行為，給予用戶很好的代入感。
色彩是讓用戶與界面生交互的關(guān)鍵性設(shè)計(jì)元素，用戶會(huì)對(duì)引導(dǎo)頁(yè)的界面色彩留下很久的印象，是因?yàn)樯适且曈X傳遞情感的最直觀因素，也是用戶視覺中最敏感的部分。其中“撞色”搭配就是一種極其吸引用戶眼球的色彩運(yùn)用方案。
②對(duì)比色搭配的形式。對(duì)比色是人的視網(wǎng)膜對(duì)色彩平衡的作用，是人通過視覺感官而產(chǎn)生的一種基本的生理反應(yīng)。對(duì)比色的搭配不同于完全對(duì)立的互補(bǔ)色，同時(shí)處于相對(duì)對(duì)立的區(qū)域中兩大類色彩之間的搭配。對(duì)比色搭配在24色相環(huán)上120度至180度之間的兩種顏色之間的搭配。
①規(guī)范式界面布局。規(guī)范式界面布局通常以大面積的留白為主，通過對(duì)界面的分割，讓信息元素成一種強(qiáng)烈的視覺聚焦，使用戶對(duì)界面產(chǎn)生參與感。
②自由式界面布局。自由式界面布局一般展示的內(nèi)容比較多，在多個(gè)界面的APP引導(dǎo)頁(yè)中闡述同一個(gè)訴求，每個(gè)界面的關(guān)系通常是并列的關(guān)系，確定界面文字、圖形元素的最大值和最小值，讓視覺聚焦在一個(gè)體塊中，再?gòu)倪@個(gè)體塊中對(duì)信息進(jìn)行排列組合，引導(dǎo)用戶的視覺流向。
③串聯(lián)式界面布局。串聯(lián)式界面布局要求引導(dǎo)頁(yè)展示的內(nèi)容要簡(jiǎn)明扼要，界面中所有的元素都要按照一定的順序有機(jī)的排列，并且頁(yè)面之間要有一定的邏輯關(guān)系。
文章來源：快資訊 作者：衍果設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，APP同質(zhì)化越來越嚴(yán)重。
而一個(gè)設(shè)計(jì)精致APP不應(yīng)漏過任何一個(gè)細(xì)節(jié)，美觀、可用和高效的界面設(shè)計(jì)都需要花費(fèi)大量的時(shí)間從細(xì)節(jié)上去打磨，并從多方面鉆研并創(chuàng)造出打動(dòng)人心的UI/UE設(shè)計(jì)。
在這里，小易為大家總結(jié)了10個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來看看吧~
1、文本顏色構(gòu)建層次
文本單純使用字體大小對(duì)比，強(qiáng)調(diào)的感覺往往不夠濃烈，我們可以嘗試結(jié)合色彩來營(yíng)造更好的對(duì)比效果。
通過使用顏色的深淺，為元素賦予不同的重要性，建立視覺上的層次結(jié)構(gòu)。
甚至可以采用兩到三種顏色來獲得對(duì)比效果：
主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）；
次要內(nèi)容使用灰色（比如商品介紹）；
輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）
2、統(tǒng)一色調(diào)
設(shè)計(jì)時(shí)避免用過多的顏色，選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡。
如果項(xiàng)目允許，必須使用固定的色板，那么可以通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。
3、干凈的陰影
陰影可以增加元素的深度，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。
相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，輕柔的陰影會(huì)讓畫面更精致。
如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺變得厚重，從而使設(shè)計(jì)變得不精致。
4、個(gè)性的圖標(biāo)設(shè)計(jì)
大多數(shù)App都是默認(rèn)灰色，選中填充品牌色，這樣的設(shè)計(jì)太普通，太常見了。
要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，也會(huì)增加用戶的體驗(yàn)感。
5、Tab的設(shè)計(jì)感
Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范。
Tab的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長(zhǎng)條來區(qū)分兩者的狀態(tài)。
可正因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。
例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。
6、統(tǒng)一設(shè)計(jì)元素
在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。
通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。
7、符合產(chǎn)品氣質(zhì)的字體
選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。
雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但系統(tǒng)字體并沒有什么特色，會(huì)喪失App的品類感。
例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢(shì)上就變?nèi)趿撕芏唷?
8、第三方圖標(biāo)風(fēng)格統(tǒng)一
第三方圖標(biāo)也是UI設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們?cè)僭O(shè)計(jì)。
一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。
9、圖片中尋找色彩
App中優(yōu)美的圖文設(shè)計(jì)非常重要，能帶給用戶極佳的視覺享受。
我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式，為了減少圖片背景對(duì)文字的干擾，通常會(huì)疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這種設(shè)計(jì)過于俗套。
我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。
10、卡片式設(shè)計(jì)
現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式。
它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率。
文章來源：快資訊 作者：衍果設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
