正文

設(shè)計(jì)界面（ui設(shè)計(jì)界面）

發(fā)布時(shí)間：2023-04-04 23:13:33 稿源：創(chuàng)意嶺閱讀： 145

大家好！今天讓小編來(lái)大家介紹下關(guān)于設(shè)計(jì)界面的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、界面設(shè)計(jì)的原則是什么?
2、ui界面設(shè)計(jì)流程
3、軟件界面設(shè)計(jì)的目的是什么？
4、如何創(chuàng)建精致的UI界面（一）：排版篇

設(shè)計(jì)界面（ui設(shè)計(jì)界面）

一、界面設(shè)計(jì)的原則是什么?

1、界面風(fēng)格保持一致。使用一致的術(shù)語(yǔ)、一致的步驟、一致的動(dòng)作，讓用戶始終用同一種方式思考與操作。最忌諱每換一個(gè)屏幕就更換一套操作命令與操作方法。

2、富有吸引力。用戶界面不僅應(yīng)該方便、高效，還應(yīng)該使用戶在使用時(shí)感到興奮，能夠從中獲得樂(lè)趣，從而吸引用戶更樂(lè)意使用它、接受它。

3、界面元素的位置。用戶界面是由若干界面元素組成的，不是所有元素都一樣重要，要確保重要的元素盡快顯現(xiàn)給用戶。重要的或頻繁訪問(wèn)的元素應(yīng)當(dāng)放在顯著的位置上，而不太重要的或使用頻率小的放到不太顯著的位置上。

4、保持界面元素的一致性。一致的外觀可以在系統(tǒng)中創(chuàng)造一種和諧。如果界面元素缺乏一致性，很可能使界面看起來(lái)雜亂無(wú)章、沒(méi)有條理，甚至可能引起用戶對(duì)系統(tǒng)可靠性的懷疑，失去對(duì)系統(tǒng)應(yīng)用的信心。

5、合理使用空白區(qū)域。當(dāng)然此處的“白”并非指白色，而是指界面中沒(méi)有被界面元素占用的空白區(qū)域。恰當(dāng)?shù)?ldquo;留白”有助于突出界面元素和改善可用性，引導(dǎo)用戶在不知不覺(jué)中進(jìn)入系統(tǒng)的思維框架，從而順利地、正確地應(yīng)用這個(gè)系統(tǒng)。

6、保持界面簡(jiǎn)單明了。界面設(shè)計(jì)中最重要的原則就是使復(fù)雜的問(wèn)題簡(jiǎn)單化。如果用戶覺(jué)得界面很復(fù)雜，則可能會(huì)認(rèn)為系統(tǒng)本身也很難，而望而卻步，所以與大而全的界面設(shè)計(jì)方案比較起來(lái)，簡(jiǎn)單明快的界面設(shè)計(jì)往往更可取。

7、慎重使用顏色。在界面上合理地使用顏色可以增加視覺(jué)上的感染力，但濫用顏色會(huì)適得其反。一般而言，亮色容易使人興奮，同時(shí)也容易使人的眼睛產(chǎn)生疲勞;柔和的暗色可以使人平靜。

二、ui界面設(shè)計(jì)流程

ui界面設(shè)計(jì)流程

導(dǎo)語(yǔ)：其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣(mài)點(diǎn)。一個(gè)電子產(chǎn)品擁有美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計(jì)。下面就由我為大家介紹一下ui界面設(shè)計(jì)流程，希望對(duì)大家有所幫助！

一、確認(rèn)目標(biāo)用戶

在UI設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計(jì)重點(diǎn)的不同。

二、采集目標(biāo)用戶的習(xí)慣交互方式

不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來(lái)源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。

當(dāng)然還要在此基礎(chǔ)上通過(guò)調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來(lái)。

三、提示和引導(dǎo)用戶

軟件是用戶的工具。因此應(yīng)該由用戶來(lái)操作和控制軟件。軟件響應(yīng)用戶的動(dòng)作和設(shè)定的規(guī)則。對(duì)于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進(jìn)行用戶需要的下一步操作。

四、一致性原則

設(shè)計(jì)目標(biāo)一致

軟件中往往存在多個(gè)組成部分（組件、元素）。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。

元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個(gè)（類）軟件采用一致風(fēng)格的外觀，對(duì)于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒(méi)有特別統(tǒng)一的衡量方法。因此需要對(duì)目標(biāo)用戶進(jìn)行調(diào)查取得反饋。

交互行為一致

在交互模型中，不同類型的元素用戶觸發(fā)其對(duì)應(yīng)的行為事件后，其交互行為需要一致。

對(duì)于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的'確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡(jiǎn)化用戶操作流程。

五、可用性原則

可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對(duì)應(yīng)的功能。

如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過(guò)對(duì)該元素的操作，理解其對(duì)應(yīng)的功能。

比如：刪除操作元素。用戶可以點(diǎn)擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對(duì)應(yīng)的功能，同時(shí)可以取消該操作。

可達(dá)到

用戶是交互的中心，交互元素對(duì)應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。

用戶可以用諸如鍵盤(pán)、鼠標(biāo)之類的交互設(shè)備通過(guò)移動(dòng)和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見(jiàn)或者不可交互的交互元素。

要注意的是交互的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏（一般來(lái)說(shuō)超過(guò)4層）那么用戶達(dá)到該元素的幾率就大大降低了。

可達(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過(guò)于復(fù)雜的界面會(huì)影響可達(dá)到的效果。（參考簡(jiǎn)單導(dǎo)向原則）

可控制

軟件的交互流程，用戶可以控制。

功能的執(zhí)行流程，用戶可以控制。

如果確實(shí)無(wú)法提供控制，則用能為目標(biāo)用戶理解的方式提示用戶。

;

三、軟件界面設(shè)計(jì)的目的是什么？

軟件界面設(shè)計(jì)的目的有以下幾點(diǎn)：想學(xué)軟件設(shè)計(jì)推薦選擇【達(dá)內(nèi)教育】。

1、簡(jiǎn)易性

界面的簡(jiǎn)潔是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯(cuò)誤選擇的可能性。

2、用戶語(yǔ)言

界面中要使用能反應(yīng)用戶本身的語(yǔ)言，而不是游戲設(shè)計(jì)者的語(yǔ)言。

3、記憶負(fù)擔(dān)最小化

人腦不是電腦，在【設(shè)計(jì)界面】時(shí)必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩(wěn)定、有限，24小時(shí)內(nèi)存在25%的遺忘率。所以對(duì)用戶來(lái)說(shuō)，瀏覽信息要比記憶更容易。

4、一致性

是每一個(gè)優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與游戲內(nèi)容相一致。

5、清楚

在視覺(jué)效果上便于理解和使用。

6、用戶的熟悉程度

用戶可通過(guò)已掌握的知識(shí)來(lái)使用界面，但不應(yīng)超出一般常識(shí)。感興趣的話點(diǎn)擊此處，免費(fèi)學(xué)習(xí)一下

想了解更多有關(guān)軟件界面設(shè)計(jì)的相關(guān)信息，推薦咨詢【達(dá)內(nèi)教育】?！具_(dá)內(nèi)教育】重磅推出“因材施教、分級(jí)培優(yōu)”創(chuàng)新教學(xué)模式，同一課程方向，面向不同受眾群體，提供就業(yè)、培優(yōu)、才高三個(gè)級(jí)別教學(xué)課程，達(dá)內(nèi)“因材施教、分級(jí)培優(yōu)“差異化教學(xué)模式，讓每一位來(lái)達(dá)內(nèi)學(xué)習(xí)的學(xué)員都能找到適合自己的課程。達(dá)內(nèi)IT培訓(xùn)機(jī)構(gòu),試聽(tīng)名額限時(shí)搶購(gòu)。

四、如何創(chuàng)建精致的UI界面（一）：排版篇

從本周開(kāi)始，接下來(lái)時(shí)間里，會(huì)和大家分享如何創(chuàng)建精致的UI界面，共五部曲，為什么要做這個(gè)分享？

曾經(jīng)我學(xué)習(xí)UI設(shè)計(jì)時(shí)，網(wǎng)上資料很多，但是參差不齊，對(duì)于新人而言，這是很痛苦的，進(jìn)步慢。因此我想通過(guò)之前踩過(guò)一些坑，集合自己的工作經(jīng)驗(yàn)，把一些知識(shí)點(diǎn)分享出來(lái)。

分享的最終目的是沉淀自己，同時(shí)也希望能給有想要提升排版能力的設(shè)計(jì)師帶來(lái)一些幫助與啟發(fā)！所以本系列文章并不一定適合所有人。

那么本周就先從排版篇幅開(kāi)啟……

排版是界面設(shè)計(jì)中最難的部分，也是非常重要的一部分，它以各種形式存在界面中，純文本排版，圖形文排版，圖片文本排版等等，這是我們?cè)谧鲈O(shè)計(jì)時(shí)候，經(jīng)常會(huì)面臨的問(wèn)題。好的排版能有效地向用戶傳遞關(guān)鍵的信息，同時(shí)也能提升產(chǎn)品使用體驗(yàn)。

在我們?nèi)粘Ｉ钪?，離不開(kāi)設(shè)計(jì)排版，包括經(jīng)常見(jiàn)到的各種廣告與電影宣傳海報(bào)，如果不能讓用戶在短時(shí)間內(nèi)記住關(guān)鍵信息，這個(gè)設(shè)計(jì)就是失敗的。因此我希望通過(guò)今天這篇文章，能夠讓你對(duì)排版有一些新的認(rèn)識(shí)。

在界面設(shè)計(jì)中，影響排版設(shè)計(jì)的因素有很多，我總結(jié)歸納了7個(gè)維度（當(dāng)然還有其他更細(xì)的，在這里就先暫時(shí)不講），它直接影響整個(gè)排版質(zhì)量，這些方法當(dāng)然不是絕對(duì)，但是如果能巧妙綜合得運(yùn)用到界面中，能保證大部分界面設(shè)計(jì)感得以提升，當(dāng)然也是需要不斷刻意練習(xí)來(lái)提高的。

分別是：

下面我會(huì)集合一些案例來(lái)和大家講解下

空間即我們常說(shuō)的留白，當(dāng)設(shè)計(jì)元素緊緊地聚集在一起時(shí)，界面看起來(lái)沒(méi)有重點(diǎn)，因此需要和諧的運(yùn)用它，空間的運(yùn)用規(guī)則直接影響產(chǎn)品的性格，小空間和大空間在視覺(jué)感受上，兩者完全不同，那么我們?cè)诮缑嬖O(shè)計(jì)中如何去更好的運(yùn)用空間來(lái)設(shè)計(jì)排版。

有一個(gè)很好的方法就是可以運(yùn)用網(wǎng)格去搭建空間，在平面設(shè)計(jì)中，運(yùn)用得非常多，那么在用戶界面中，同樣也可以運(yùn)用網(wǎng)格去搭建，下面看一個(gè)案例：

如上圖作者把一個(gè)界面分為4Gird，通過(guò)搭建好的網(wǎng)格來(lái)進(jìn)行界面中元素排版，右側(cè)是我拆解的圖（備注：網(wǎng)格的搭建并沒(méi)有任何強(qiáng)制性的規(guī)定需要搭建多少列，最終的搭建列數(shù)需要根據(jù)這個(gè)產(chǎn)品內(nèi)容復(fù)雜程度去定義的），比如：我最近在做車(chē)載HMI設(shè)計(jì)語(yǔ)言，同樣也運(yùn)用了網(wǎng)格，那么我會(huì)根據(jù)整個(gè)車(chē)載HMI產(chǎn)品復(fù)雜程度去搭建，同時(shí)也運(yùn)用了幾種網(wǎng)格配合使用。

上面兩個(gè)例子我們可以發(fā)現(xiàn) 設(shè)計(jì)師運(yùn)用了大空間來(lái)設(shè)計(jì)界面，這使得整個(gè)界面呼吸感更強(qiáng)，更透氣，因?yàn)橐彩?娛樂(lè) 類偏雜文產(chǎn)品，所以設(shè)計(jì)會(huì)偏藝術(shù)化一些。

韓國(guó)29cm產(chǎn)品是我比較喜歡的一個(gè)app，整體設(shè)計(jì)呼吸感很強(qiáng)，留白空間大，視覺(jué)焦點(diǎn)清晰。

我們都知道大的物體更吸引眼球，更容易引起我們的注意，那么在設(shè)計(jì)中，我們一般都會(huì)將重要元素放大，突出顯示。

a和b那個(gè)更吸引你？

答案是a. 因?yàn)閍類型排版看起來(lái)很大，更具有吸引力。

上面案例中算是大小方法上運(yùn)用比較好的，我們可以看出視覺(jué)層次非常清晰了。首先我能快速知道哪些重要信息，肯定是封面圖，接著左上角logo,然后就是導(dǎo)航和標(biāo)題了，最后就是針對(duì)每個(gè)內(nèi)容塊的一些詳細(xì)文案解釋。

簡(jiǎn)單示例，重要的信息一定要大，次級(jí)信息弱化。

顏色在排版設(shè)計(jì)中起著很大的作用，能起到點(diǎn)睛之筆，又或者為畫(huà)面帶來(lái)活力，又或者代表著品牌，當(dāng)然我們?cè)赨I界面中字體顏色一定要慎用，因?yàn)椴煌伾x是不同的。合理恰當(dāng)運(yùn)用顏色，能夠瞬間提升設(shè)計(jì)品質(zhì)感。

上面這個(gè)web設(shè)計(jì)中，設(shè)計(jì)師通過(guò)紅色來(lái)強(qiáng)調(diào)重要信息，同時(shí)也讓灰白的畫(huà)面有了些許不同之處。

對(duì)某些文本使用輔助顏色，例如鏈接文本，圖1 使用方式正確。圖2將顏色大量使用在正文，嚴(yán)重影響視覺(jué)體驗(yàn)。

避免像圖2那樣使用對(duì)比度低的顏色。

對(duì)齊是界面設(shè)計(jì)中我們經(jīng)常提到話題，也是提升界面品質(zhì)感最重要的一個(gè)隱形的力量，也許有時(shí)候我們會(huì)忽略他，有時(shí)候會(huì)不經(jīng)意間就沒(méi)做好。

對(duì)齊的界面比不對(duì)齊的要整齊很多，視覺(jué)流也符合用戶閱讀習(xí)慣。

我們可以借用前面所學(xué)的網(wǎng)格來(lái)對(duì)齊，這樣不僅設(shè)計(jì)有節(jié)奏感，同時(shí)畫(huà)面很整齊美觀。

我們界面設(shè)計(jì)中可以有三種思路對(duì)齊方式，當(dāng)然根據(jù)業(yè)務(wù)板塊去選擇合適的對(duì)齊方式，三種對(duì)齊方式都有一個(gè)隱形的軸（看我標(biāo)的線），然后圍繞這個(gè)去排版設(shè)計(jì)，自然形成一個(gè)規(guī)則的視覺(jué)流。

上面案例中作者整體偏左對(duì)齊，這樣形成以左為中心一個(gè)軸展開(kāi)視覺(jué)流走向。

我們?cè)谧鼋缑嬖O(shè)計(jì)時(shí)候，會(huì)經(jīng)常遇到有人說(shuō)你的設(shè)計(jì)，要么是這邊太重了，要么就是太輕了，或者這邊要不加點(diǎn)東西進(jìn)去，不然太空了，為什么？

這就是平衡定律，如果同一個(gè)環(huán)境下的物體沒(méi)有保持平衡關(guān)系，我們視覺(jué)感受上是很不舒服的。

下面我們看幾個(gè)例子：

圖1和圖2 我們可以看出，圖2 給人第一感受就是不平衡的，整體視覺(jué)重心偏左。

上圖案例，設(shè)計(jì)師通過(guò)按鈕來(lái)平衡整個(gè)畫(huà)面視覺(jué)重心，因?yàn)樽髠?cè)內(nèi)容多，如果按鈕很弱或者很小，是很難平衡畫(huà)面的，因此我們做界面時(shí)候，定義一些按鈕大小也是非?？季康?。

左邊視覺(jué)界面，右邊拆解原型出來(lái)，我們可以看到設(shè)計(jì)師也是通過(guò)元素合理分布使得界面整體平衡。

字體選擇對(duì)界面排版非常至關(guān)重要，這也是所有界面排版中必要的一步，不同字體有不同的性格屬性，我們需要根據(jù)產(chǎn)品來(lái)選擇恰當(dāng)?shù)闹杏⑽淖煮w。同時(shí)，也需要記住，一個(gè)產(chǎn)品APP界面設(shè)計(jì)中，字體最好不要超過(guò)兩種

推薦一些我認(rèn)為2019比較好用的英文字體，大家做概念設(shè)計(jì)時(shí)候或者提案方案包裝時(shí)候是可以用到的哦（吐血推薦）。

分別是：Montserrat 和 Nexa 字體。

分別是：Futura 和 Playfair_Display 字體

中文好用的字體，大家應(yīng)該都知道，平方字體，思源黑體，漢儀旗黑，蘭亭纖黑，我就不做示例了。

終于到最后一趴了，最后這點(diǎn)是整個(gè)設(shè)計(jì)排版的核心之一，為什么？

如果不清晰設(shè)計(jì)目標(biāo)，那么整個(gè)排版風(fēng)格也許最后產(chǎn)出和你用戶群體或者產(chǎn)品性格是兩種類型的，不同產(chǎn)品風(fēng)格會(huì)有不同的排版style。

比如：我們產(chǎn)品是奢侈品，那么整體排版設(shè)計(jì)風(fēng)格一定是使用大網(wǎng)格，大空間去設(shè)計(jì)，字體纖細(xì)等。如果是簡(jiǎn)約現(xiàn)代呢？又或者母嬰產(chǎn)品，科技產(chǎn)品，娛樂(lè) 產(chǎn)品等等，每個(gè)會(huì)有一些特殊排版思路。所以了解你的設(shè)計(jì)目標(biāo)，并確定設(shè)計(jì)原則。

有了這些原則與目標(biāo)，那么接下來(lái)就是開(kāi)始找參考，找靈感找到對(duì)應(yīng)產(chǎn)品他們是如何排版，如何控制畫(huà)面節(jié)奏感的，推薦多去使用pinterest或者behance

通過(guò)七大點(diǎn)排版思路，可以更好的運(yùn)用在界面設(shè)計(jì)中，每個(gè)排版原則并不是獨(dú)立的個(gè)體，他們之間是相輔相成的關(guān)系，比如大小離不開(kāi)網(wǎng)格，也離不開(kāi)對(duì)比，顏色等等，缺乏某些元素，那么界面就會(huì)缺失靈魂，設(shè)計(jì)產(chǎn)出質(zhì)量并不好！

好了本期到這里結(jié)束，下期會(huì)繼續(xù)和大家分享如何巧妙運(yùn)用圖形提高界面品質(zhì)感和增強(qiáng)細(xì)節(jié)！

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議

以上就是小編對(duì)于設(shè)計(jì)界面問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話，或添加微信。