平面設計基礎UI設計師需掌握的
UI設計在視覺化界面操作的階段,與平面設計的交集是如何組織和處理每個界面的信息。下面是YJBYS小編整理的平面設計基礎相關知識,希望對你有幫助!
1. 如何組織信息
組織頁面信息的首要任務是判斷信息優先級,分清重要信息與次要信息,刪除無用信息。化繁為簡,降低視覺干擾。舉個小例子,數份簡歷扎堆時,信息有效快速傳達是第一步,再者才是加入一點點自己的小個性。
2. 如何對齊
首先達成信息優先級主次的共識,可以提升排版的效率。
a. 信息分組
先從一個酒店預定成功通知消息案例來看,通知信息文字平鋪直敍,並未合理分組(左圖)。圖片部分上方酒店評價、信息地址和電話操作按鈕劇中對齊,酒店名成為了一個小標題。做適當調整後(右圖),使得正文通知、價格和時間字段分組明確。電話按鈕同酒店信息組對齊,使得圖片區域的文字和操作信息更為整體。
b. 居中對齊or左對齊
信息分組後,居中排列每組信息的小標題,模塊感增強,使得閲讀標題和每個組信息中產生視線的跳躍。小標題和每組信息統一居左對齊,更符合快速瀏覽和操作。
3. 如何有重點
a. 大小對比
前面談了如何組織信息,那如何使主要信息更為有重點?首先可以通過拉開大小比例,拿一張活動海報來舉例。5米處能看到什麼?海報的大圖案渲染氣氛的整體感受;3米處能看到什麼?活動主標題;1米近距離又能發現什麼?具體信息和時間等。
b. 並非均分
看似沒有什麼差錯的信息佈局(左圖),為什麼始終差了一些什麼?由於細節之處並非理解信息主次。最初設計稿追求絕對的均分,導致信息較散,沒有“組”的緊湊感。
頁面元素中的左右間隔往往也會被忽視,如(左圖)中帳號頭像與頁面的左邊距=帳號名稱之間間隔,使得頁面中間區域的信息散於頁面邊界。具有平面設計意識的排版不僅是設計軟件中的文本框絕對居中對齊,需要對信息分組與主次深入思考,避免機械的均分對齊。
UI設計中對平面基礎能力的檢驗
UI設計(User Interface界面設計)的設計原則:簡易性、一致性、用户習慣、人性化等。遵循UI設計的設計原則,提高平面設計能力,可使得界面更為優雅。
1. 精簡與一致性
在手Q公眾號圖文消息優化中,我們發現線上舊的圖文消息邊距較為肥厚,在大圖+1小圖的.情況下由於代碼的模塊化拼接,始終無法達到完美的像素間距。在考慮多種純文字、單圖、多圖文模版拼接後,儘量減少間距規則和字號種類,達到拼接模版的統一規則。保證一致性為前提,也提供靈活拼接的多樣性。
大圖+1的情況下,定義1條小圖的上下間距相等等於一個單位,而不是單個模塊中小圖距離上方的1/2單位,在+n小圖的時候使得兩個小圖之間的間距相加後等於一個單位(見下圖)。這個小小的視覺細節在和技術同學耐心聯調後是可以完美實現的。
2. 操作的輕量化
在某電台app概念設計中,討論後優化框架(右圖),默認拉取專輯封面圖,支持上傳圖片入口置於右上角,默認歌詞展示在封面圖上可點擊編輯,整個頁面可視化了最終分享出去的樣式,所見即所得。設計優化後,讓整個操作有了重點。可以直接在分享預覽圖上操作,縮短了分享路徑,最重要帶給用户輕量化的操作感受。
平面設計靈感注入UI設計
好的UI設計可以讓軟件變得有個性和品位,同時操作上是簡單舒適的。平面設計的靈感,往往可以使得界面設計跳出線框與控件的束縛,充分體現軟件的定位和特點,使用過程中變得更有趣味。
1. 更具吸引力的點擊
關注一個賬號、小站的通常app的做法是:頭像加關注按鈕。在 V 的頻道界面中,點擊頭像即關注,按下後頭像成為星形遮罩,表示已關注,點擊操作反饋超乎預期又在情理之中。
2. 更優雅的操作
在手機app上後期處理一張照片時,通常是操作區域和照片分開。Black 的處理照片主界面的操作有趣而直觀,再調整曲線或加暗角操作都在圖片層上,整個界面的導航也突破了傳統控件模塊,使得整個app在直觀又易操作的基礎上,彰顯獨特的態度和個性。
-
平面設計中彩色的搭配
色彩千變萬化,彩色的搭配是我們研究的重點。我們依然需要進一步學習一些色彩的知識。一.色環。我們將色彩按"紅->黃->綠->藍->紅"依次過度漸變,就可以得到一個色彩環。色環的兩端是暖色和寒色,當中是中型色。紅.橙.橙黃.黃.黃綠.綠.青綠.藍綠.藍.藍紫.紫.紫紅.紅|...
-
平面設計之標誌設計的意義
標誌多用於表示特定對象的個性形象,可以是具有一定設計感的文字、圖形等。以下是小編整理的平面設計之標誌設計的意義,歡迎參考閲讀!人們看到煙的上升,就會想到下面有火。煙就是有火的一種自然標記。在通訊不發達的時代,人們利用煙(狼煙)作為傳送與火的意義有關聯的(...
-
PS平面設計尺寸
字平面設計中,不同的設計產品所要求的尺寸規格也是不一樣的。下面小編為大家整理了平面設計平面設計尺寸,希望能幫到大家!名片橫版:90*55mm<方角>85*54mm<圓角>豎版:50*90mm<方角>54*85mm<圓角>方版:90*90mm90*95mmIC卡85x54MM三摺頁廣告標準尺寸:(A4)210mmx285mm...
-
平面設計中使用色塊排版的技巧
使用色塊進行排版也很是實用的一項技巧,而且容易營造時尚的感覺,經常被用在畫冊和網頁設計當中,色塊在版式中的主要用途有以下幾個:1.劃分區域在畫冊或網頁設計中,可以用色塊來劃分區域,一個色塊承載一塊信息,使該色塊內的內容與其他信息區別開來,如果色塊較多時最好讓...