個人頁面ui設(shè)計教程

　　在App中，個人中心頁又稱為“我的”頁面，通常設(shè)計在底部菜單欄的最右側(cè)。社交應(yīng)用中，個人中心有兩種角色的劃分，一個是自己的主頁面，還有一個是他人的中心頁面，自己的個人頁面可以自己進(jìn)行編輯，而他人的頁面是供用戶關(guān)注或進(jìn)行私信交流的。所以，個人中心頁與其他頁面在功能上需要有場景區(qū)分。個人頁面ui設(shè)計中最重要的是用戶體驗，站在用戶的角度去考慮設(shè)計的合理性。
 

　　個人中心頁主要由頭像、個人信息和內(nèi)容模塊組成，通常會采用頭像居中對齊的方式進(jìn)行設(shè)計，目的是為了體現(xiàn)當(dāng)前頁面的信息都與本人有關(guān)。頭像一般會采用圓形，因為這樣看起來更為協(xié)調(diào)，同時畫面也會顯得更為飽滿。
 

　　居中對齊的個人中心頁，還有一種設(shè)計是以頭像居左對齊為主，通常在信息比較多的情況下會采用這種設(shè)計，不僅能節(jié)省空間，同時也能讓內(nèi)容在一屏上展示完整。在社交應(yīng)用中，更多的是要凸顯人與人的關(guān)系，所以個人中心“關(guān)注”和“粉絲”的數(shù)量是兩個非常重要的信息。設(shè)計時應(yīng)該著重凸顯數(shù)字，體現(xiàn)個人在群體中的價值。
 

　　界面作為我們認(rèn)識APP的第一道門檻，是APP的“面子”，更是不可忽視的一項重點設(shè)計，為了建立有效的UI，設(shè)計師需要根據(jù)移動端APP本身的特性和當(dāng)下趨勢，作出不一樣的改變。但當(dāng)今設(shè)計趨勢瞬息萬變，在沒有統(tǒng)一標(biāo)準(zhǔn)的設(shè)計規(guī)則之下，緊跟設(shè)計趨勢，才能保證UI對用戶的吸引力常在。常見的移動UI界面設(shè)計：
 

　　閃屏頁：每次打開App時第一眼看到的就是閃屏頁(又稱啟動頁)，該頁面承載了用戶對這款A(yù)pp的第一印象，因此對設(shè)計的要求是很考究的。閃屏頁給用戶觀看的時間很短，通常只有一秒的時間，因此，如何在這么短的時間內(nèi)表達(dá)出產(chǎn)品的定位就是UI設(shè)計師需要重點考慮的問題。只有設(shè)計出定位明確且吸引人的閃屏頁，才能加深用戶對產(chǎn)品的認(rèn)知度。閃屏頁分為品牌宣傳型、節(jié)假關(guān)懷型和活動推廣型3種類型，不同類型的閃屏頁承載的內(nèi)容信息和表達(dá)方式也不一樣。
 

　　1、品牌宣傳型：App的閃屏頁是為了體現(xiàn)產(chǎn)品的品牌而設(shè)定的，主要組成部分是“產(chǎn)品名稱+產(chǎn)品形象+產(chǎn)品廣告語”，如圖所示。品牌宣傳型的閃屏頁是最為直白的閃屏頁，設(shè)計較為精簡，力求凸顯品牌特點。
 

　　2、節(jié)假關(guān)懷型：當(dāng)節(jié)假日來臨，很多App會通過營造節(jié)假日的氣氛來體現(xiàn)人文關(guān)懷。當(dāng)眼前出現(xiàn)一幅樸實的節(jié)假日插圖時，觀者會從內(nèi)心感受到軟件帶來的祝福，從而擁有美好的心情。QQ音樂在設(shè)計中，對品牌的LOGO進(jìn)行了延展設(shè)計，以凸顯節(jié)假日的元素。這種設(shè)計不僅能夠加強(qiáng)與用戶的情感交流，還能加深用戶的品牌的印象。用LOGO體現(xiàn)假日元素的閃屏頁，也可以用整個場景的插畫來營造節(jié)假日的氛圍，這也是非常討喜的表現(xiàn)方式。
 

　　3、活動推廣型：有時候產(chǎn)品在運(yùn)營過程中會做一些活動或者廣告，推廣內(nèi)容通常會顯示在閃屏頁上?；顒油茝V型的閃屏頁多以插畫形式表現(xiàn)。要著重體現(xiàn)的是活動主題及時間節(jié)點，營造熱鬧的活動氛圍。在設(shè)計時一定要抓住主次，避免因為煩瑣的場景影響到主題的體現(xiàn)。
 

　　引導(dǎo)頁：一個好的App引導(dǎo)頁能夠迅速抓住使用者的眼球，讓他們快速了解App的價值和功能，起到很好的引導(dǎo)作用。有一句話是這么說的：“優(yōu)秀的UI可以造就App的點擊率”。在做引導(dǎo)頁之前，我們首先要學(xué)會定位，了解App的目標(biāo)用戶群。簡單來說，引導(dǎo)頁分為功能介紹型、情感帶入型和搞笑型3種類型。
 

　　1、功能介紹型引導(dǎo)頁：是最基礎(chǔ)的一種引導(dǎo)頁。這種引導(dǎo)頁要保證信息展示一針見血，在這樣一個網(wǎng)絡(luò)化、碎片化的時代，用戶停留在引導(dǎo)頁上的時間越來越短，瀏覽時間通常不會超過3秒。在這寶貴的3秒鐘內(nèi)，設(shè)計師需要把簡潔明了、通俗易懂的文案和界面呈現(xiàn)給用戶。功能介紹型引導(dǎo)頁：分為帶按鈕的引導(dǎo)頁和不帶按鈕的引導(dǎo)頁兩種類型。一般社交類的產(chǎn)品會強(qiáng)制引導(dǎo)用戶去登錄，所以會在引導(dǎo)頁面中加入登錄的入口。
 

　　2、情感帶入型引導(dǎo)頁：通過文案和配圖，把用戶需求通過某種形式表現(xiàn)出來，引導(dǎo)用戶去思考這個App的價值，這種類型的引導(dǎo)頁要求設(shè)計形象化、生動化、立體化，能夠增強(qiáng)產(chǎn)品的預(yù)熱效果，同時給用戶帶來某種驚喜。
 

　　3、搞笑型引導(dǎo)頁的閱讀量一般都比較高，拼的是設(shè)計效果或動畫效果。在一般情況下，這種類型的引導(dǎo)頁對設(shè)計師的要求比較高，需要設(shè)計師學(xué)會扮角色和講故事，綜合運(yùn)用擬人化和交互化的表達(dá)方式，根據(jù)目標(biāo)用戶的特點來進(jìn)行設(shè)計，最終讓用戶身臨其境，在頁面上停留更長的時間。
 

　　浮層引導(dǎo)頁：一般出現(xiàn)在功能操作提示中，是為了能夠讓用戶在使用過程中更好地解決問題而提前設(shè)計的用戶教育。種引導(dǎo)頁的浮層通常以手繪表現(xiàn)方式為主，會使用箭頭和圓圈來進(jìn)行設(shè)計，并用高亮的顏色來突出信息，同時采用蒙版方式來加強(qiáng)突出功能。
 

　　列表頁：在使用軟件搜索或點擊分類查找后會出現(xiàn)結(jié)果頁面。結(jié)果頁面通常會以列表的形式來體現(xiàn)，包括單行列表和雙行列表兩種，展示的內(nèi)容為“圖片+名稱+介紹”。另外，還可以用時間軸和圖庫的形式來設(shè)計列表頁。列表頁的設(shè)計雖然簡單，但卻困擾著不少設(shè)計師。設(shè)計列表頁時，留白空間要張弛有度，且要有親疏之分;對齊的方式要規(guī)整;粗細(xì)元素的組合要有節(jié)奏感;需要重點突出的元素的顏色要明亮;列表的層次感要分明;在用虛實方式進(jìn)行結(jié)合設(shè)計時，要保證實的對象在前，虛的對象在后。
 

　　時間軸：為了加強(qiáng)內(nèi)容的前后時間關(guān)系，通常會使用時間軸的方式來設(shè)計列表頁，這樣的表現(xiàn)形式能夠更好地凸顯每條信息之間的關(guān)系，讓用戶閱讀起來更有條理性，如圖 所示。時間軸列表頁的展示方式為左邊是時間軸上各節(jié)點，右邊是與時間節(jié)點對應(yīng)的內(nèi)容。
 

　　可輸入頁面：在社交軟件中，注冊登錄頁面是必不可少的，這類頁面的設(shè)計務(wù)必要做到易用簡便。注冊登錄頁要考慮喚起鍵盤的時候文字信息會不會被遮擋，輸入框的寬度是否易于操作，文字提示是不是達(dá)到最精簡程度等。
 

　　注冊登錄頁面：在發(fā)布信息內(nèi)容的時候會出現(xiàn)相關(guān)的內(nèi)容填寫頁面，這種頁面很注重類別的分組，例如將圖片分為一組，貨號和批發(fā)價分為一組，將內(nèi)容有條理地進(jìn)行分組等?？梢詼p少用戶的填寫壓力，如圖所示。在分類比較多的情況下，選用的背景和分割線的顏色不宜太重，否則會讓頁面顯得瑣碎不堪。
 

　　3D效果正流行：C4D大熱，很多商家都使用了3D效果，有的還加上了動效，可以讓你全方位、多角度、更加真實的觀察商品。目前還不會C4D的設(shè)計師們，需要提升你的競爭力了。
 

　　插畫風(fēng)格：運(yùn)用的越來越廣泛，適用于app當(dāng)中的啟動頁、缺省頁、banner圖、專題頭圖、彈窗插畫、icon等等，運(yùn)用時要和app的整體風(fēng)格搭配，有趣味、富有創(chuàng)意的插畫會讓用戶對app的好感大幅提升。
 

　　交互動效越來越多的使用在ui設(shè)計中，它對于產(chǎn)品設(shè)計的作用包含：傳遞層級和狀態(tài)信息，好的動效應(yīng)該是隱形的，以提高可用性為前提，提升體驗為目的。它的幾點特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果
 

　　啟動頁的小視頻：一般小視頻使用在啟動頁多用于第一次打開app的場景，對用戶的代入感較強(qiáng)，能夠很好的感染用戶的情緒，但是視頻時間不宜過長。
 

　　由動態(tài)圖片轉(zhuǎn)變成動態(tài)視頻：一般常見于微信配圖，核心是圖片中有少量的動態(tài)元素，仿佛賦予圖片生命，比較唯美和貼近現(xiàn)實。為了吸引更多用戶的注意力，手機(jī)UI設(shè)計banner設(shè)計上采用了動態(tài)視頻進(jìn)行展現(xiàn)，另外淘寶商品詳情頁也會放置動態(tài)視頻效果，方便360度的查看商品，刺激你剁手的欲望。另外一些網(wǎng)頁的首頁也會放置高質(zhì)量、有故事性的視頻，會讓你的網(wǎng)站與眾不同。
 

　　響應(yīng)式設(shè)計：隨著移動端的增長，手機(jī)已經(jīng)超越了pc端作為日常瀏覽網(wǎng)站的第一選擇，Google推出的MD響應(yīng)式柵格系統(tǒng)，由于人力成本過高，國內(nèi)大部分網(wǎng)頁都沒有做，國外采用響應(yīng)式設(shè)計的網(wǎng)站有：Youtube、Spotify、Behance...國內(nèi)的有京東、騰訊視頻等。這種響應(yīng)式設(shè)計確實比較復(fù)雜，但是這個趨勢會一直繼續(xù)下去，對于產(chǎn)品、公司而言，還是需要量力而行的進(jìn)行升級。
 

　　色彩趨勢：彩色漸變一直是設(shè)計趨勢，設(shè)計師將大膽的漸變，飽和度更高的漸變運(yùn)用在設(shè)計中去，讓整體的色彩感覺，更加年輕化與活躍。
 

　　除了漸變色，大膽的單色在設(shè)計中運(yùn)用也會越來越多，整個設(shè)計就一套色彩體系貫穿，大多時候以品牌色的形式去運(yùn)用，配合留白，對比明顯的字體，整體給人印象深刻。它的優(yōu)勢是色彩干凈，品牌整體感強(qiáng)，但是對設(shè)計師駕馭頁面能力也要求很高，因為大面積的單色，如果用不好就會很刺眼。
 

　　插畫也是一種新的表達(dá)方式，越來越多的設(shè)計師，插畫師通過插畫表達(dá)產(chǎn)品的情緒，個人的情緒主張需要和品牌很好的融合起來。插畫對于品牌來說也是非常重要的一個因素，無論在界面設(shè)計，還是在品牌營銷很多場景都需要插畫去營造產(chǎn)品氛圍和氣質(zhì)，插畫有助于將我們的品牌故事講述給聽眾聽，所以在構(gòu)建一個品牌時候，插畫是非常重要的點之一，但是做之前一定要盡量多去了解我們?yōu)榭蛻籼峁┑脑O(shè)計價值。
 

　　3D插畫：隨著人們的審美變化，趨勢也從靜態(tài)變成動態(tài)，從平面變成3D，從今年的支付寶五福設(shè)計中大家應(yīng)該能感覺到2020的插畫設(shè)計一定是往著3D方向，而且是動態(tài)3D方向演進(jìn)的。
 

　　等距插畫：未來或許和場景聯(lián)系更緊密，在每年天貓雙11設(shè)計中，互動城的設(shè)計每年基本都是等距插畫風(fēng)格，它的故事感和畫面感，都能讓人眼前一亮，所以電商的設(shè)計，在短時間內(nèi)，大型活動場景基本都離不開這個風(fēng)格。
 

　　隨著內(nèi)容的升級，對內(nèi)容的表達(dá)也會被越來越重視，那么如何更好的把內(nèi)容更生動表達(dá)出來，插畫就是很好的一個形式，根據(jù)內(nèi)容定制的插畫，在很多產(chǎn)品中被運(yùn)用到，互聯(lián)網(wǎng)教育，IT等領(lǐng)域。插畫的形態(tài)終于不再是孤零零的只是用戶情感的表達(dá)，而是隨著內(nèi)容的升級變化，在產(chǎn)品中發(fā)揮的重要性也越來越大。
 

　　作為ui設(shè)計師，進(jìn)行個人頁面ui設(shè)計時我們需要了解設(shè)計趨勢必然與技術(shù)發(fā)展緊密結(jié)合，平時就要和我們設(shè)計進(jìn)行結(jié)合，在滿足用戶體驗的同時，做好我們的設(shè)計。