- 相關(guān)推薦
平面設(shè)計(jì)基礎(chǔ)UI設(shè)計(jì)師需掌握的
UI設(shè)計(jì)在視覺化界面操作的階段，與平面設(shè)計(jì)的交集是如何組織和處理每個(gè)界面的信息。下面是YJBYS小編整理的平面設(shè)計(jì)基礎(chǔ)相關(guān)知識(shí)，希望對你有幫助!
1. 如何組織信息
組織頁面信息的首要任務(wù)是判斷信息優(yōu)先級(jí)，分清重要信息與次要信息，刪除無用信息�；睘楹啠档鸵曈X干擾。舉個(gè)小例子，數(shù)份簡歷扎堆時(shí)，信息有效快速傳達(dá)是第一步，再者才是加入一點(diǎn)點(diǎn)自己的小個(gè)性。
2. 如何對齊
首先達(dá)成信息優(yōu)先級(jí)主次的共識(shí)，可以提升排版的效率。
a. 信息分組
先從一個(gè)酒店預(yù)定成功通知消息案例來看，通知信息文字平鋪直敘，并未合理分組(左圖)。圖片部分上方酒店評(píng)價(jià)、信息地址和電話操作按鈕劇中對齊，酒店名成為了一個(gè)小標(biāo)題。做適當(dāng)調(diào)整后(右圖)，使得正文通知、價(jià)格和時(shí)間字段分組明確。電話按鈕同酒店信息組對齊，使得圖片區(qū)域的文字和操作信息更為整體。
b. 居中對齊or左對齊
信息分組后，居中排列每組信息的小標(biāo)題，模塊感增強(qiáng)，使得閱讀標(biāo)題和每個(gè)組信息中產(chǎn)生視線的跳躍。小標(biāo)題和每組信息統(tǒng)一居左對齊，更符合快速瀏覽和操作。
3. 如何有重點(diǎn)
a. 大小對比
前面談了如何組織信息，那如何使主要信息更為有重點(diǎn)?首先可以通過拉開大小比例，拿一張活動(dòng)海報(bào)來舉例。5米處能看到什么?海報(bào)的大圖案渲染氣氛的整體感受;3米處能看到什么?活動(dòng)主標(biāo)題;1米近距離又能發(fā)現(xiàn)什么?具體信息和時(shí)間等。
b. 并非均分
看似沒有什么差錯(cuò)的信息布局(左圖)，為什么始終差了一些什么?由于細(xì)節(jié)之處并非理解信息主次。最初設(shè)計(jì)稿追求絕對的均分，導(dǎo)致信息較散，沒有“組”的緊湊感。
頁面元素中的左右間隔往往也會(huì)被忽視，如(左圖)中帳號(hào)頭像與頁面的左邊距=帳號(hào)名稱之間間隔，使得頁面中間區(qū)域的信息散于頁面邊界。具有平面設(shè)計(jì)意識(shí)的排版不僅是設(shè)計(jì)軟件中的文本框絕對居中對齊，需要對信息分組與主次深入思考，避免機(jī)械的均分對齊。
UI設(shè)計(jì)中對平面基礎(chǔ)能力的檢驗(yàn)
UI設(shè)計(jì)(User Interface界面設(shè)計(jì))的設(shè)計(jì)原則：簡易性、一致性、用戶習(xí)慣、人性化等。遵循UI設(shè)計(jì)的設(shè)計(jì)原則，提高平面設(shè)計(jì)能力，可使得界面更為優(yōu)雅。
1. 精簡與一致性
在手Q公眾號(hào)圖文消息優(yōu)化中，我們發(fā)現(xiàn)線上舊的圖文消息邊距較為肥厚，在大圖+1小圖的情況下由于代碼的模塊化拼接，始終無法達(dá)到完美的像素間距。在考慮多種純文字、單圖、多圖文模版拼接后，盡量減少間距規(guī)則和字號(hào)種類，達(dá)到拼接模版的統(tǒng)一規(guī)則。保證一致性為前提，也提供靈活拼接的多樣性。
大圖+1的情況下，定義1條小圖的上下間距相等等于一個(gè)單位，而不是單個(gè)模塊中小圖距離上方的1/2單位，在+n小圖的時(shí)候使得兩個(gè)小圖之間的間距相加后等于一個(gè)單位(見下圖)。這個(gè)小小的視覺細(xì)節(jié)在和技術(shù)同學(xué)耐心聯(lián)調(diào)后是可以完美實(shí)現(xiàn)的。
2. 操作的輕量化
在某電臺(tái)app概念設(shè)計(jì)中，討論后優(yōu)化框架(右圖)，默認(rèn)拉取專輯封面圖，支持上傳圖片入口置于右上角，默認(rèn)歌詞展示在封面圖上可點(diǎn)擊編輯，整個(gè)頁面可視化了最終分享出去的樣式，所見即所得。設(shè)計(jì)優(yōu)化后，讓整個(gè)操作有了重點(diǎn)。可以直接在分享預(yù)覽圖上操作，縮短了分享路徑，最重要帶給用戶輕量化的操作感受。
平面設(shè)計(jì)靈感注入U(xiǎn)I設(shè)計(jì)
好的UI設(shè)計(jì)可以讓軟件變得有個(gè)性和品位，同時(shí)操作上是簡單舒適的。平面設(shè)計(jì)的靈感，往往可以使得界面設(shè)計(jì)跳出線框與控件的束縛，充分體現(xiàn)軟件的定位和特點(diǎn)，使用過程中變得更有趣味。
1. 更具吸引力的點(diǎn)擊
關(guān)注一個(gè)賬號(hào)、小站的通常app的做法是：頭像加關(guān)注按鈕。在 V 的頻道界面中，點(diǎn)擊頭像即關(guān)注，按下后頭像成為星形遮罩，表示已關(guān)注，點(diǎn)擊操作反饋超乎預(yù)期又在情理之中。
2. 更優(yōu)雅的操作
在手機(jī)app上后期處理一張照片時(shí)，通常是操作區(qū)域和照片分開。Black 的處理照片主界面的操作有趣而直觀，再調(diào)整曲線或加暗角操作都在圖片層上，整個(gè)界面的導(dǎo)航也突破了傳統(tǒng)控件模塊，使得整個(gè)app在直觀又易操作的基礎(chǔ)上，彰顯獨(dú)特的態(tài)度和個(gè)性。
【平面設(shè)計(jì)基礎(chǔ)UI設(shè)計(jì)師需掌握的】相關(guān)文章：
平面設(shè)計(jì)師必須掌握的基礎(chǔ)09-30
新手平面設(shè)計(jì)師需要掌握的基礎(chǔ)知識(shí)09-22
平面設(shè)計(jì)師必須掌握的平面設(shè)計(jì)項(xiàng)目10-30
平面設(shè)計(jì)師需了解的其他知識(shí)09-29
平面設(shè)計(jì)新手需要掌握的基礎(chǔ)知識(shí)09-17
泡茶需掌握的技巧06-12
泡茶需掌握技巧07-21