ui設計新手入門學習需要注意什麼細節

2021-10-24 22:13:33 字數 4325 閱讀 9354

這篇文章對初學者來說特別有用,但我還是建議所有設計師都應該把這些設計基礎牢記在心,無論是否有經驗。本文更偏向一些基礎性的設計原則,而這些原則在實踐中卻往往被人遺忘。希望下面這些原則對你的設計能起到乙個高階調優的作用。

(彩雲經常在一些工作多年的設計師作品中,發現他們同樣會在這些基礎問題上犯錯,所以一定不要輕視這些基礎。常掛在嘴邊的,所謂的細節也就是這些了。)

1.排版設計

首先宣告一下,在乙個專案中不應該使用2種以上的字型,以及它們的多種風格樣式。這句話非常重要,希望大家無論如何也要遵循這個原則。下面我們來談點更具體的細節。

文字間距

每當你使用完全由大寫字母組成的文字時,不要忘記設定字母間距。這樣可以防止字元之間的粘連,也會讓文字有更好的可讀性。

文字粗細

在使用細體和極細體字型的時候要格外注意。中細體字可以用,但要看具體的字型細到啥程度。如果你做的產品最終會被使用者在螢幕上看到,那麼最好不要使用細體和極細字型,因為它們非常難閱讀,在某些螢幕上甚至會造成半畫素模糊的效果。

標題和正文字型大小

我們來談談網頁排版。標題的級別有6個(h1-h6)。首先你應該確保你的專案中的標題級別不超過四個,並控制好它們的邏輯和一致性。乙個**或著陸頁的最大標題(可能出現在主頁面的第一塊)可以隨心所欲:目前的趨勢是鼓勵有表現力的排版。但是,確保你的標題的其餘部分不要太大,因為太大的文字和太小的文字一樣難以閱讀。

現在說下正文。瀏覽器的預設設定(以chrome瀏覽器為參照),會以16px大小顯示每個文字。這個大小閱讀起來是相當舒服的,但我傾向於主文字用不小於17px,附加文字用14px。保留12px作為最小的尺寸,而較小的尺寸由於視力問題或顯示器不好而變得幾乎無法閱讀。記住,要避免近似的尺寸,不要在同一段中使用16px和17px,這樣會給產品的外觀帶來混亂和視覺上的不協調,可能會讓人誤以為是錯誤。

行高

內容的層次

應使用加粗來突出顯示文字的重要部分,包括標題、鏈結和按鈕,有時也包括文字中被強調的部分。但如果所有文字內容都被加粗,就會變得不清楚該看**,分不清哪些部分更重要。內容需要有一定的層次性。

文字對比度

在設計中要特別注意文字的顏色。它應該有足夠的對比度,這樣文字在任何型別的顯示器上都可以易讀。這對於經常使用淺灰色的輸入欄位中的佔位符尤其重要。

2.間距和邊距

負空間(元素之間的 "空氣")對於乙個好的設計是必不可少的。留白有助於理清元素之間的關係,提公升節奏和平衡感。

去掉多餘的框和線

有時使用1px的邊框是合理的,但也有其他方法來區分這類元素,比如陰影或間距。最主要的是,卡片之間的外邊距應該大於卡片內填充元素的內邊距。去掉任何元素上不必要的框架,就可以為內容節省空間。畢竟,內容才是任何產品最重要的部分,所以不要沒理由的去掉地為它預留的空間。

元素層級

邊距有助於從視覺上確定乙個元素是否屬於另乙個元素。讓我們考慮一下新聞**上的一篇文章的布局。假設它由一張、乙個標題、3-4行預覽文字和發布日期組成。標題應該與內容成為一組,日期的邊距應該比標題和文字之間的邊距略大一些。最後,應該和標題-文字單元的日期一樣,甚至更遠。不明白麼?還是看看下面的吧。

少即是多

總有乙個客戶或者經理要求所有的資訊必須塞進乙個區塊或者一張介面上。所以,標題、**,以及整個選單、優惠資訊都要塞進去。還有,別忘了乙個大大的logo。我不怎麼會談判,也想不出如何讓他們輕易改變主意的辦法。

但至少你可以這樣說:使用者一次接收的資訊越少,他就越容易採取行動(例如,打乙個**)。循序漸進的資訊接收,可以確保更容易、更愉悅的使用者體驗。不要讓使用者在識別你的介面布局時遇到困難,而一堆元素堆積在一起是很難產生美觀愉悅的體驗。

不均勻的邊緣邊距

如果你在製作海報、banner或我們最喜歡的卡片時,要注意邊緣的邊距。如果你以經典的從左上角到右下角的方式來布局內容,那讓頂部的邊距比左側的邊距稍大一點,看起來會比四面均勻的邊距更加舒服,美觀。

3.顏色和配圖

一些logo的想法

我不太經常做logo,在我的職業生涯中,做了大概20個左右的logo,我的心得是,乙個好的logo是很難做的。但是,作為乙個設計師,只要遵循基本的規則和原則,一定可以製作出乙個像樣的logo。比如精心選擇顏色。

有一次,我看到乙個叫 "vip catch "的漁具店用了乙個紫色的logo。紫色和 "vip "兩個字的組合,並不能真正讓人產生對釣魚的聯想。一般來說,任何行業都可以用任何顏色,除非有明顯的脫節,比如上面講的那個例子。如果你覺得把(符號)放進logo很難,那就不要做,盡量把它做成乙個純字型的logo,少即是多。

投影

物體的投影絕對不應該是黑色的。投影的顏色永遠都需要結合環境的顏色(彩雲注:就想象成介面中有乙個太陽光打過來,會反射周圍的環境色,所以會帶有周圍物件的顏色)。物體通常有幾個投影:乙個是小而亮的,直接在它的正下方(如果是站著或躺著的東西),第二個是比較模糊、透明的投影。避免專案中髒的、不自然的投影。

圖示和配圖

凡是可以向量的東西都應該向量。所有的圖示,箭頭和logo都應該以svg格式(ios開發的pdf格式)交給開發者。png圖示邊緣模糊,看起來很糟糕,尤其是在視網膜顯示器上。此外,用向量圖占用記憶體也較少。

關於圖示

如果你正在為乙個**或應用開發一套圖示,請確保所有的圖示都屬於乙個 "家族"。這意味著相同的筆畫寬度,相同的邊框半徑。檢查一下,確保每個圖示都適合在相同大小的正方形中,並且有相同的視覺重量。如果有些圖示有圓圈,確保這些圓圈的直徑相同。圖示應該有一致的風格。

4.其他

還有幾件事情想說,但我沒有想好怎麼分類,所以放在這部分。

避免奇怪的布局

讓我們回到我們在空間和邊距部分學習過的新聞預覽的例子。如果我們將元素(、標題、文字和日期)以非常規的順序排列,可能會讓人感到困惑。試著堅持使用通用的介面布局。通用不一定意味著枯燥,你可以隨時在專案的其他部分展示創意。

避免在沒有充分理由的情況下,在螢幕/頁面/卡片上實驗性地定位元素。否則使用者可能會感到困惑而離開你的**或應用。請記住,設計師和藝術家是不同的職業。在設計中,我們是為人創造產品,這意味著你的個人創意衝動只能應用在不會干擾使用者體驗的地方。

介面尺寸

好在我也是乙個設計師,我自己也可以通過調整頁邊距和大小來解決這個問題,讓它在任何螢幕上都能好看。然而,前端開發人員通常沒有設計背景,會完全按照提供給他們的設計方式來實現。因此,在普通的膝上型電腦螢幕上,元素會過大。需要注意的是,一般的膝上型電腦螢幕的垂直寬度限制在700px左右,所以要盡量將乙個模組放入這個顯示範圍內。

內容填充

重複的示例文字放在設計中看起來會很廉價,不專業,所以應當避免使用。它只會讓人覺得你懶得得去做一些像樣的內容。此外,現在不再需要自己建立,有一堆sketch和figma的外掛程式可以自動填充內容。內容盡量不要重複,哪怕只是為了演示的目的。放上不同的、標題和不同長度的預覽文字,效果看起來會更好。

遊戲開發UI介面設計需要注意什麼?

棋牌遊戲能否在市場中得到玩家的歡迎主要取決於棋牌遊戲產品的玩法,介面風格,以及執行環境。特別是在棋牌遊戲開發完成運營初期,ui介面更是棋牌平台是否能吸引更多玩家的關鍵因素之一。因此,棋牌遊戲開發ui設計一定要合理,盡可能滿足不同玩家的需求。那麼棋牌遊戲開發ui介面設計又應當注意些什麼呢?了解受眾群體...

學習UI設計時需要注意哪些點?分享這4個事項

可能我們活得都比較現實,所以在網際網路的世界裡大家都比較喜歡抽象化的事物吧。是的,抽象化的ui有時候更能得到使用者的青睞,更能給使用者提供不一樣的體驗和感覺,所以我們正在學習的時候要注意這一點。分屏化 將螢幕的內容分割,可以三五個板塊 可以網格化 小巧而清新。特別是如果應用到響應式 上,你會發現適配...

UI設計師要負責哪些方面的工作?新手入門須知

作為目前比較受歡迎的崗位之一,ui設計師薪資待遇高,發展前景好,是很多年輕人轉行的首選。想要學習ui設計,怎麼學比較好?是困擾大家的問題。同時,新手在學習時對於ui設計師負責哪些方面的工作內容也不是清楚。下面我就給大家簡單講解一下。一 ui介面的美工設計 你設計的ui介面是否能夠成功引起使用者的注意...