圖片的合理使用,清晰的信息層次,舒適的色彩搭配,會提升整個APP的美感,從而為整個產品體驗加分。
壹個成功的產品,視覺水平只是壹部分,但作為壹個合格的UI設計師,我們要做的就是把這部分做到極致。
讓我們通過圖片、文字、色彩、圖標、空白等維度來解剖APP設計,找到那些細微的細節。只要比別人多改進1px的細節,妳的APP設計就會更精致。
目錄
1,圖片,喜歡壹個人的衣著品味;
2、文字,我只想知道重點在哪裏;
3、色彩,如何成為“色彩”策劃人;
4.圖標,從畫到畫有多遠;
5.留白,我只要足夠的空間。
主體
1,圖片,喜歡壹個人的衣著品味。
圖片在APP中非常常見,圖片的呈現形式和質量影響著用戶對產品的感官體驗。
圖片的定位就好比壹個人的服裝品味。不同的穿衣風格會讓別人對妳做出不同的判斷,給妳貼上不同的社交屬性標簽。
下面我們來看看圖片在APP設計中需要註意的關鍵點,從圖片比例、壹致性、畫質、真實性等方面來分析壹下。
1.1,畫面比例的側重點是什麽?
不同比例的圖片傳達不同的信息主題。根據產品屬性,我們會選擇與之相符合的圖片比例進行整體框架布局。
通過體驗壹些主流app,我們會發現壹些常用的圖片比例,比如1:1,4:3,16:9,16:10等。
我們也會發現壹些打破常規比例的設計。我們需要分析他們的性格,結合自己產品的特點,才能在自己的APP設計中合理使用。
1:1強調主體的存在。
1:1的畫面比例是常見的設計比例,使用這種長寬比更容易簡化構圖,突出主體的存在。
常用於產品展示、頭像、特寫展示等場景,尤其是在電商app中。
4.3圖像緊湊,易於構圖。
4:3的畫面比例可以讓圖像更緊湊,更容易構圖,方便設計師發揮。由於手機屏幕容量小,當顯示為全屏時,比例在App的設計和布局上占據了很大的空間。
16:9電影場景效果
16:9的畫面比例可以呈現出電影場景般的效果,多用於橫向構圖。它是使用最廣泛的尺碼表之壹,可以給用戶帶來廣泛的體驗。
在很多影視娛樂APP設計中都有廣泛應用,比如騰訊視頻、網易雲音樂等。
擁抱黃金比例
黃金比例就像金字塔上的珍珠。離它越近,它就越有吸引力,否則魅力就會減弱。16:10的畫面比例最接近。
X:≤Y瀑布流設計
X:≤Y表示瀑布設計,寬度固定,最大值之間的高度可以自定義。這種設計方法在壹些用戶沒有明確目的,只是喜歡獲取盡可能多的信息的情況下采用。
註意X:≤Y的畫面比例的高度控制,不要超過屏幕的可顯示區域。比如750x1334px的設計中花瓣網的最大高度是848px。
圖像比例選擇方法:
A.選擇能充分展現商品特征的圖片比例,以商品展示的效果為依據;
b、根據產品氣質,選擇符合產品內容氣質的圖片展示比例;
c、根據產品特點選擇合適的常用比例;
d .根據布局靈活定義特定比例值;
e分析→打破→創新,創造符合壹定規律或審美觀念的比例價值。
1.2,畫面比例壹致
我們在根據產品特點確定合適的圖片顯示比例時,需要根據整體布局和圖片分布來規範哪些布局可以采用相同的圖片顯示比例。
在保證視覺效果和交互形式的情況下,同壹主題最好以相同的比例呈現在不同的頁面中,這樣既能保持視覺表達的壹致性,又能給後期的運維帶來方便。
1.3,提升畫質。
越來越多的產品開始註重圖片的質量。比如網易YEATION對產品圖片的拍攝和處理都有嚴格的規定,目的是提升產品的氣質,打動用戶。
我們設計的時候,要用最好的圖片來襯托我們的設計稿。圖片的質量影響整個界面的風格。
很多夥伴會覺得,圖片是運營後期上傳的,我設計稿再漂亮也沒用。我對這個問題的看法如下:
A.最好的設計輸出是設計師特長的體現;
B.把最好的效果呈現給決策者,增加他對妳設計能力的印象;
C.通過制定可操作的視覺規範來控制畫面質量,可以嚴格控制妳對畫面的視覺追求;
D.妳的態度會給妳帶來好運。
1.4,真實還原圖片
雖然前面提到了畫質的重要性,但是我們也不能為了視覺效果而選擇壹些與主題無關的圖片,這樣也會誤導決策者。
我們可以提高圖片的質量,但是需要保證圖片的真實還原,讓妳的設計作品更加真實合理。
在壹些本土產品設計中,使用國外圖片素材需要慎重對待。比如案件中的模特形象,文案信息的傳播更偏向於國內場景,
如果用的是國外的模型素材,可能會高壹些,但是不能真實還原產品場景,會給決策者傳達壹種錯誤的認知。
2、正文,我只想知道鑰匙在哪裏。
文字設計的層次感決定了信息的高效傳遞。文本信息的層次化處理可以有效幫助用戶獲取信息,提高用戶對產品的操作效率。
2.1,文本信息的層次分化
當我們得到交互原型或其他需求文檔時,需要有效區分文本的信息層次,以便用戶快速獲取和理解所傳達的信息。
文本信息可以簡單地分為重要信息、次要信息、輔助信息等。在文字排版中,需要清晰地梳理信息之間的層次關系,提高用戶的整體體驗。
通過對字體大小、顏色、留白、層次劃分等的處理。,對屬性相同的信息進行分類設計,使整個信息有明確的優先級和層次安排。
為了達到整體界面的視覺平衡,設計師在視覺表達文字時需要減少文字樣式的使用,不應該使用過多的表達樣式來突出文字信息。
2.2.估計信息呈現的最大價值。
我們在設計界面的時候,初級設計師往往忽略了文字信息的最大價值,只是按照自己的習慣做出壹個完美的布局。
終於,當我進入測試階段的時候,我發現了為什麽會有比我預想的多得多的信息。這時候就會出現返工,給整個產品開發進度帶來風險。
2.3、善於利用提示進行設計。
在壹些文字信息較大的界面設計中,為了提高用戶獲取信息的效率,我們會根據整體視覺效果選擇合適的提示。
很多初級設計師會過分遵循交互原型,往往對大尺度的文字處理過於隨意,只美化交互原型,缺乏用戶體驗的主動性。
在設計產品交互時,有時候產品或交互無法從視覺角度對信息進行梳理和布局。我們需要用自己的特長去優化妳認為可以做得更好的東西,也可以在整個產品過程中為妳樹立專業性。
主要有數字、字母、圖形、色塊等。只要能有效區分信息層級。
3、色彩,如何成為壹名“色彩”策劃人?
色彩給人最直觀的感覺,不同性格的色彩搭配傳達出不同的情感。配色有壹些方法,但也有壹些感性的判斷。
作為視覺設計師,我們需要學習理性的方法和技巧,也需要不斷欣賞優秀的作品來提高自己的審美能力。
3.1,色彩基礎知識
顏色分為非彩色系列和彩色系列,非彩色系列是指白色、黑色和各種深淺的灰色;色系是指紅、橙、黃、綠、青、藍、紫等顏色。
3.2、顏色庫的建立
作為壹個初級設計師,我們對色彩搭配的控制不是很穩定。為了提高工作效率,我們需要以壹些合理的方式建立大量的顏色庫,以滿足不同的需求。
下面是壹些常用的方法,供大家參考。收集顏色的方法有很多。我們只需要掌握幾個適合自己的就可以了。只要養成習慣,長期堅持,哪怕只用壹種方式,也會收獲很多。
A.通過各種app收集顏色。
體驗不同領域的APP,建立不同領域APP色調的選擇,為後期項目設計打下基礎。根據主色分類,
如紅色系列:網易雲音樂、JD.COM、網易YEATION、網易考拉等等;也可以按照產品氣質分類,比如文藝、時尚、科技、可愛等等。
B.通過Dribbble收集顏色
在Dribbble上,每個作品的右側都有壹個配色文件。如果發現優秀的作品,要養成收集配色文件的習慣。
C.通過攝影作品收集顏色
通過優秀的攝影作品收集色彩也是常用的方法之壹。
收集方法:
Photoshop打開圖片→保存為Web格式→選擇GIF格式→選擇顏色8→雙擊顏色表中的色塊→拾色器。
d .通過馬賽克收集顏色
借助Photoshop濾鏡,可以得到優秀作品或攝影圖片的色彩組合,特別適合收集同壹色系的色彩組合。
收集方法:
Photoshop打開圖片→濾鏡→像素化→馬賽克→設置單元格大小。
E.從電影中收集顏色
相信大家都喜歡看大片。這部電影之所以能受到大家的追捧,壹定有太多值得借鑒的元素。
作為壹群神經質的設計師,那些刺激我們神經元的優秀電影場景是絕對不能錯過的。
3.3、提高審美,增強感性判斷。
雖然配色的能力可以通過壹些理性的方法來提高,但是也有壹些感性的判斷。配色上的細微差異往往是情緒化的判斷。
我們需要不斷欣賞攝影、繪畫、設計作品等等,全面提升自己的審美,才能不斷增強自己的感性判斷。
作為壹個UI設計師,不能只關註界面設計。可以觀看平面作品、攝影繪畫、影視動畫,體驗手工藝制作、體育娛樂的每壹次變革,細心體驗生活。
3.4、養成分析的習慣
要想有好的配色能力,積累的過程很重要。我們看到優秀的作品,要分析色彩搭配之間的對比關系,色彩在色環上的位置關系,HSB值之間的關系等等。
只有不斷的分析總結,才能逐漸形成自己的思維方式,提高對不同配色的駕馭能力。
分析的習慣不僅僅用在色彩上,還需要在版式、文字信息處理、圖標設計風格、間距等方面不斷分析總結。只有掌握了優秀作品的規律,才能形成自己的標準習慣。
4.圖標,離知道怎麽畫還有多遠?
圖標是APP設計中的點睛之筆,不僅可以幫助傳達文字信息,還可以作為信息載體被高效識別。圖標也起到壹定的界面裝飾作用,提高界面的整體美觀度。
很多初級設計師會忽略圖標的重要性,養成從網站下載素材再利用的習慣。當這種習慣形成後,他們會逐漸失去自己做事的動力,希望找資料下載。工作幾年後,他們很快就會遇到自己的瓶頸。
設計師對圖標設計的態度和掌控能力,將是拉開妳和其他設計師差距的因素之壹。
圖標設計有幾個階段,下載重用→動手設計→標準設計→融入品牌基因。妳現在屬於哪個階段?
4.1,下載重用
下載重用是很多剛入行的設計師熟悉的工作方式之壹。由於自身在軟件技術、設計技巧、創作能力等方面的不足,無法完成壹個合格的圖標設計從創意到標準繪制。
缺點:圖標設計風格和細節處理完全不壹致,這種習慣壹旦養成,就會逐漸失去動手能力。
4.2、動手設計
對於大部分追求設計的設計師來說,他們會意識到圖標設計的重要性,也會結合產品特點畫出風格統壹的圖標。
註:圖標設計風格包括:線性圖標、填充圖標、平面圖標、平面圖標、手繪圖標、準實物圖標。
無論我們選擇什麽樣的表現形式,在設計時都要保持風格的統壹。因為圖標的大小不同,不同大小的圖標視覺平衡也不壹樣。比如同樣大小的正方形會比圓形大。
因此,我們需要根據圖標的體積來調整圖標的大小。
4.3、標準設計
當設計師養成了自己動手的習慣,恭喜妳的進步。保持這個習慣。隨著軟件技術的成熟,我們需要嚴格控制自己的隨機性,使用標準規範來設計圖標。
在標準設計的基礎上,充分發揮自己的創造力,並不壹定局限於標準,但整體本質需要符合設計規範。
4.4、融入品牌基因
圖標設計的差異化已經逐漸模糊。在很多功能相似的情況下,圖標的造型設計也差不多。很多更註重設計的產品也開始根據自己的品牌基因定制圖標。
帶有品牌基因的圖標設計具有很強的品牌識別性,不僅能形成獨特的視覺差異化,還能增強用戶對產品的記憶。
5.留白,我只要足夠的空間。
A.設計壹個對比稿,將產品需要的方案和妳認為完美的方案進行對比;
B.篩選出這樣處理的優秀案例,用成功案例說服產品接受妳的方案;
C.進行用戶測試,選擇部分目標用戶進行體驗,從用戶內心設計出最佳方案;
設計總結
1.不同的畫面比例體現不同的特點,根據產品特點進行合理選擇;
2.在設計中保持圖片比例壹致,不僅使視覺表達壹致,也給後期運維帶來方便;
3.通過提高圖片質量來提高設計作品的美感,同時也保證圖片的真實還原;
4.文字排版需要註意信息的層次、最大信息容量、巧妙運用提示等。
5.養成不斷建立和豐富顏色庫的習慣;
6.提高審美,增強感性判斷,形成分析的習慣;
7.圖標設計體驗的幾個環節:下載重用→動手設計→標準設計→融入品牌基因;
8.適當的留白可以給人更舒適的體驗。