界面設(shè)計(jì)在現(xiàn)在很多行業(yè)都涉及，特別是在移動(dòng)APP中，界面設(shè)計(jì)直接影響到用戶(hù)的使用體驗(yàn)。那怎么才能設(shè)計(jì)好的界面設(shè)計(jì)？今天就讓小編為大家介紹界面設(shè)計(jì)案例中總結(jié)的設(shè)計(jì)技巧。

　　界面設(shè)計(jì)案例中總結(jié)的設(shè)計(jì)技巧

　　1、用顏色和字重來(lái)設(shè)計(jì)層級(jí)，而不只是字號(hào)的大小

　　當(dāng)面對(duì)需要信息層級(jí)結(jié)構(gòu)的內(nèi)容時(shí)，放大字號(hào)表示強(qiáng)調(diào)和重要性通常不能解決問(wèn)題，信息層級(jí)并不僅僅是不同尺寸字體的組合，而是由字體尺寸，字重，字體顏色形成對(duì)比的正確組合。對(duì)比差異越大，層級(jí)關(guān)系表現(xiàn)越明顯。

　　2、不要?jiǎng)?chuàng)建多種色調(diào)的黑色

　　我們都知道使用黑色文本顏色會(huì)導(dǎo)致讀者眼睛疲勞，所以我們的解決方案是創(chuàng)建更黑的變體作為替代。我們可以使用不同的不透明度的黑色作為解決方案，而不是選擇 3 個(gè)或更多的顏色值，還可以根據(jù)應(yīng)用的位置（即主要內(nèi)容、次要內(nèi)容等）降低了不透明度。

　　3、運(yùn)用數(shù)學(xué)原理理解顏色

　　選擇正確的顏色組合，可以在色相、飽和度、亮度（HSB）上進(jìn)行簡(jiǎn)單的加法和減法就能發(fā)揮魔法，在這個(gè)公式里我們將使用 HSB 的色彩模式，而不是 RGB 模式。你可以輕松擺脫彩色背景上無(wú)聊的白色，并把它變成畢加索的作品。

　　4、使用留白間距分隔組

　　除了在兩個(gè)組之間添加一條線(xiàn)來(lái)表示區(qū)分之外，在組與組之間使用一個(gè)寬敞的留白的解決方案會(huì)更好、更容易的。正如鄰近定律所說(shuō)：相互靠近或接近的物體，往往被歸在一起?？梢栽跇?biāo)題和作者之間使用 24px 的大留白來(lái)創(chuàng)建一個(gè)分隔。

界面設(shè)計(jì)案例（圖片來(lái)自網(wǎng)絡(luò)）

　　5、利用顏色分隔行

　　除了使用線(xiàn)條之外，在列表中添加彩色背景對(duì)于閱讀中的用戶(hù)來(lái)說(shuō)很有效，并且對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)也會(huì)更有樂(lè)趣。

　　6、用正片疊底代替文本陰影

　　設(shè)計(jì)標(biāo)題組件或在圖像上添加文本是非常具有挑戰(zhàn)性的，特別是如果圖像背景是動(dòng)態(tài)的（或時(shí)不時(shí)變化）。對(duì)于動(dòng)態(tài)圖像背景的文本，通常的解決方案是給文本添加陰影，但這并不能提高用戶(hù)的可讀性。而且它會(huì)增加文字周?chē)囊曈X(jué)混亂，因?yàn)樗鼈兲钛a(bǔ)了文字之間的留白。

　　此外，正片疊底效果的灰度比例還能使圖像的其他部分保持其自然的顏色，并使文本所在的部分圖像更暗一點(diǎn)，來(lái)提高文本的可讀性。

　　7、行的長(zhǎng)度

　　大多數(shù)設(shè)計(jì)師經(jīng)常使內(nèi)容的長(zhǎng)度更長(zhǎng)，以便符合頁(yè)面。但這樣會(huì)使用戶(hù)造成視覺(jué)疲勞。每行 45-65 個(gè)字符是理想的。你是否曾遇到過(guò)像這樣兩難的情況：減少行的長(zhǎng)度以達(dá)到理想狀態(tài)，但這樣做會(huì)在右邊留下一個(gè)像下圖這樣的大空白。不要猶豫，使整個(gè)文本與頁(yè)面垂直居中，這樣就可以減小空白區(qū)域了。

　　8、組件化提升效率

　　不是基于組件的設(shè)計(jì)會(huì)使設(shè)計(jì)不一致。當(dāng)你意識(shí)到你已經(jīng)制作了 5 種卡片界面，10 個(gè)按鈕，5 種標(biāo)題樣式等等。在開(kāi)始為特定內(nèi)容創(chuàng)建界面之前，請(qǐng)?jiān)囍榭粗皠?chuàng)建的設(shè)計(jì)，您可能看到可以回收利用的樣式模板?？梢允褂谩窤a的興趣打卡11Day」的樣式，為「Aa 的潛水日記」創(chuàng)建另一張界面卡片。這將為設(shè)計(jì)人員節(jié)省時(shí)間，同時(shí)還能保持界面一致。

　　9、使用品牌色做為強(qiáng)調(diào)色

　　我們通常認(rèn)為品牌顏色必須占據(jù)界面設(shè)計(jì)顏色的很大一部分。但事實(shí)上，在干凈簡(jiǎn)潔的布局中，我們很難決定在哪里展示客戶(hù)的品牌顏色。好的方案是把它們用作強(qiáng)調(diào)色。

　　10、突出項(xiàng)目標(biāo)記

　　最后，如果你正在創(chuàng)建一個(gè)類(lèi)似下圖的列表設(shè)計(jì)，請(qǐng)將項(xiàng)目標(biāo)記、符號(hào)或數(shù)字放在空白處以突出顯示列表。這將使用戶(hù)的可讀性流動(dòng)不被打擾并且更清晰。

界面設(shè)計(jì)案例（圖片來(lái)自網(wǎng)絡(luò)）

　　各類(lèi)優(yōu)秀的界面設(shè)計(jì)案例

　　1、記錄日常生活的日程類(lèi)App，與同類(lèi)產(chǎn)品不同的是，這款A(yù)pp將用戶(hù)記錄的每一件事都劃分成一個(gè)個(gè)獨(dú)立的個(gè)體，每一條狀態(tài)都能單獨(dú)直接操作。這樣的設(shè)計(jì)也讓用戶(hù)對(duì)自己所記錄的行為一目了然，形成了良好的交互體驗(yàn)。

　　2、音樂(lè)類(lèi)的App，要做出新意，在音量和均衡器被安置在兩個(gè)不同的角度，常用的音量鍵放在了最便于手指滑動(dòng)的地方，而使用頻率較低的均衡器就放在了最不容易被誤點(diǎn)到的區(qū)域。在播歌曲的播放進(jìn)度條圍繞著歌曲CD封面，提升了整個(gè)App界面的現(xiàn)代感。

　　3、Sperant的App界面屬于很標(biāo)準(zhǔn)的扁平化設(shè)計(jì)風(fēng)格。因?yàn)樵O(shè)計(jì)師合理的減少了線(xiàn)框的使用，所以App呈現(xiàn)出簡(jiǎn)潔高端是必然的。

　　4、模糊背景的設(shè)計(jì)效果不僅僅在網(wǎng)頁(yè)設(shè)計(jì)中得到廣泛運(yùn)用，在App界面的設(shè)計(jì)中也漸漸流行起來(lái)。

　　5、唯美的天氣類(lèi)應(yīng)用。App首頁(yè)使用了模糊圖像作為背景，營(yíng)造了一個(gè)清新脫俗的氛圍。切換到城市選擇頁(yè)面時(shí)立即翻頁(yè)成鮮艷的紅色，讓用戶(hù)享受了一種獨(dú)特的視覺(jué)沖力，但頁(yè)面頂端的透明搜索框又與首頁(yè)的風(fēng)格相輝映。

　　以上就是小編為大家介紹的關(guān)于界面設(shè)計(jì)案例的相關(guān)內(nèi)容。界面設(shè)計(jì)本來(lái)就有很多讓設(shè)計(jì)者發(fā)揮的地方，不過(guò)多了解一些優(yōu)秀的界面設(shè)計(jì)案例有助于提高設(shè)計(jì)者的設(shè)計(jì)審美。