在App中,個人中心頁又稱為“我的”頁面,通常設(shè)計在底部菜單欄的最右側(cè)。社交應(yīng)用中,個人中心有兩種角色的劃分,一個是自己的主頁面,還有一個是他人的中心頁面,自己的個人頁面可以自己進行編輯,而他人的頁面是供用戶關(guān)注或進行私信交流的。所以,個人中心頁與其他頁面在功能上需要有場景區(qū)分。個人頁面ui設(shè)計中最重要的是用戶體驗,站在用戶的角度去考慮設(shè)計的合理性。
個人中心頁主要由頭像、個人信息和內(nèi)容模塊組成,通常會采用頭像居中對齊的方式進行設(shè)計,目的是為了體現(xiàn)當前頁面的信息都與本人有關(guān)。頭像一般會采用圓形,因為這樣看起來更為協(xié)調(diào),同時畫面也會顯得更為飽滿。
居中對齊的個人中心頁,還有一種設(shè)計是以頭像居左對齊為主,通常在信息比較多的情況下會采用這種設(shè)計,不僅能節(jié)省空間,同時也能讓內(nèi)容在一屏上展示完整。在社交應(yīng)用中,更多的是要凸顯人與人的關(guān)系,所以個人中心“關(guān)注”和“粉絲”的數(shù)量是兩個非常重要的信息。設(shè)計時應(yīng)該著重凸顯數(shù)字,體現(xiàn)個人在群體中的價值。
界面作為我們認識APP的第一道門檻,是APP的“面子”,更是不可忽視的一項重點設(shè)計,為了建立有效的UI,設(shè)計師需要根據(jù)移動端APP本身的特性和當下趨勢,作出不一樣的改變。但當今設(shè)計趨勢瞬息萬變,在沒有統(tǒng)一標準的設(shè)計規(guī)則之下,緊跟設(shè)計趨勢,才能保證UI對用戶的吸引力常在。常見的移動UI界面設(shè)計:
閃屏頁:每次打開App時第一眼看到的就是閃屏頁(又稱啟動頁),該頁面承載了用戶對這款App的第一印象,因此對設(shè)計的要求是很考究的。閃屏頁給用戶觀看的時間很短,通常只有一秒的時間,因此,如何在這么短的時間內(nèi)表達出產(chǎn)品的定位就是UI設(shè)計師需要重點考慮的問題。只有設(shè)計出定位明確且吸引人的閃屏頁,才能加深用戶對產(chǎn)品的認知度。閃屏頁分為品牌宣傳型、節(jié)假關(guān)懷型和活動推廣型3種類型,不同類型的閃屏頁承載的內(nèi)容信息和表達方式也不一樣。
1、品牌宣傳型:App的閃屏頁是為了體現(xiàn)產(chǎn)品的品牌而設(shè)定的,主要組成部分是“產(chǎn)品名稱+產(chǎn)品形象+產(chǎn)品廣告語”,如圖所示。品牌宣傳型的閃屏頁是最為直白的閃屏頁,設(shè)計較為精簡,力求凸顯品牌特點。
2、節(jié)假關(guān)懷型:當節(jié)假日來臨,很多App會通過營造節(jié)假日的氣氛來體現(xiàn)人文關(guān)懷。當眼前出現(xiàn)一幅樸實的節(jié)假日插圖時,觀者會從內(nèi)心感受到軟件帶來的祝福,從而擁有美好的心情。QQ音樂在設(shè)計中,對品牌的LOGO進行了延展設(shè)計,以凸顯節(jié)假日的元素。這種設(shè)計不僅能夠加強與用戶的情感交流,還能加深用戶的品牌的印象。用LOGO體現(xiàn)假日元素的閃屏頁,也可以用整個場景的插畫來營造節(jié)假日的氛圍,這也是非常討喜的表現(xiàn)方式。
3、活動推廣型:有時候產(chǎn)品在運營過程中會做一些活動或者廣告,推廣內(nèi)容通常會顯示在閃屏頁上。活動推廣型的閃屏頁多以插畫形式表現(xiàn)。要著重體現(xiàn)的是活動主題及時間節(jié)點,營造熱鬧的活動氛圍。在設(shè)計時一定要抓住主次,避免因為煩瑣的場景影響到主題的體現(xiàn)。
引導頁:一個好的App引導頁能夠迅速抓住使用者的眼球,讓他們快速了解App的價值和功能,起到很好的引導作用。有一句話是這么說的:“優(yōu)秀的UI可以造就App的點擊率”。在做引導頁之前,我們首先要學會定位,了解App的目標用戶群。簡單來說,引導頁分為功能介紹型、情感帶入型和搞笑型3種類型。
1、功能介紹型引導頁:是最基礎(chǔ)的一種引導頁。這種引導頁要保證信息展示一針見血,在這樣一個網(wǎng)絡(luò)化、碎片化的時代,用戶停留在引導頁上的時間越來越短,瀏覽時間通常不會超過3秒。在這寶貴的3秒鐘內(nèi),設(shè)計師需要把簡潔明了、通俗易懂的文案和界面呈現(xiàn)給用戶。功能介紹型引導頁:分為帶按鈕的引導頁和不帶按鈕的引導頁兩種類型。一般社交類的產(chǎn)品會強制引導用戶去登錄,所以會在引導頁面中加入登錄的入口。
2、情感帶入型引導頁:通過文案和配圖,把用戶需求通過某種形式表現(xiàn)出來,引導用戶去思考這個App的價值,這種類型的引導頁要求設(shè)計形象化、生動化、立體化,能夠增強產(chǎn)品的預熱效果,同時給用戶帶來某種驚喜。
3、搞笑型引導頁的閱讀量一般都比較高,拼的是設(shè)計效果或動畫效果。在一般情況下,這種類型的引導頁對設(shè)計師的要求比較高,需要設(shè)計師學會扮角色和講故事,綜合運用擬人化和交互化的表達方式,根據(jù)目標用戶的特點來進行設(shè)計,最終讓用戶身臨其境,在頁面上停留更長的時間。
浮層引導頁:一般出現(xiàn)在功能操作提示中,是為了能夠讓用戶在使用過程中更好地解決問題而提前設(shè)計的用戶教育。種引導頁的浮層通常以手繪表現(xiàn)方式為主,會使用箭頭和圓圈來進行設(shè)計,并用高亮的顏色來突出信息,同時采用蒙版方式來加強突出功能。
列表頁:在使用軟件搜索或點擊分類查找后會出現(xiàn)結(jié)果頁面。結(jié)果頁面通常會以列表的形式來體現(xiàn),包括單行列表和雙行列表兩種,展示的內(nèi)容為“圖片+名稱+介紹”。另外,還可以用時間軸和圖庫的形式來設(shè)計列表頁。列表頁的設(shè)計雖然簡單,但卻困擾著不少設(shè)計師。設(shè)計列表頁時,留白空間要張弛有度,且要有親疏之分;對齊的方式要規(guī)整;粗細元素的組合要有節(jié)奏感;需要重點突出的元素的顏色要明亮;列表的層次感要分明;在用虛實方式進行結(jié)合設(shè)計時,要保證實的對象在前,虛的對象在后。
時間軸:為了加強內(nèi)容的前后時間關(guān)系,通常會使用時間軸的方式來設(shè)計列表頁,這樣的表現(xiàn)形式能夠更好地凸顯每條信息之間的關(guān)系,讓用戶閱讀起來更有條理性,如圖 所示。時間軸列表頁的展示方式為左邊是時間軸上各節(jié)點,右邊是與時間節(jié)點對應(yīng)的內(nèi)容。
可輸入頁面:在社交軟件中,注冊登錄頁面是必不可少的,這類頁面的設(shè)計務(wù)必要做到易用簡便。注冊登錄頁要考慮喚起鍵盤的時候文字信息會不會被遮擋,輸入框的寬度是否易于操作,文字提示是不是達到最精簡程度等。
注冊登錄頁面:在發(fā)布信息內(nèi)容的時候會出現(xiàn)相關(guān)的內(nèi)容填寫頁面,這種頁面很注重類別的分組,例如將圖片分為一組,貨號和批發(fā)價分為一組,將內(nèi)容有條理地進行分組等。可以減少用戶的填寫壓力,如圖所示。在分類比較多的情況下,選用的背景和分割線的顏色不宜太重,否則會讓頁面顯得瑣碎不堪。
3D效果正流行:C4D大熱,很多商家都使用了3D效果,有的還加上了動效,可以讓你全方位、多角度、更加真實的觀察商品。目前還不會C4D的設(shè)計師們,需要提升你的競爭力了。
插畫風格:運用的越來越廣泛,適用于app當中的啟動頁、缺省頁、banner圖、專題頭圖、彈窗插畫、icon等等,運用時要和app的整體風格搭配,有趣味、富有創(chuàng)意的插畫會讓用戶對app的好感大幅提升。
交互動效越來越多的使用在ui設(shè)計中,它對于產(chǎn)品設(shè)計的作用包含:傳遞層級和狀態(tài)信息,好的動效應(yīng)該是隱形的,以提高可用性為前提,提升體驗為目的。它的幾點特性:快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果
啟動頁的小視頻:一般小視頻使用在啟動頁多用于第一次打開app的場景,對用戶的代入感較強,能夠很好的感染用戶的情緒,但是視頻時間不宜過長。
由動態(tài)圖片轉(zhuǎn)變成動態(tài)視頻:一般常見于微信配圖,核心是圖片中有少量的動態(tài)元素,仿佛賦予圖片生命,比較唯美和貼近現(xiàn)實。為了吸引更多用戶的注意力,手機UI設(shè)計banner設(shè)計上采用了動態(tài)視頻進行展現(xiàn),另外淘寶商品詳情頁也會放置動態(tài)視頻效果,方便360度的查看商品,刺激你剁手的欲望。另外一些網(wǎng)頁的首頁也會放置高質(zhì)量、有故事性的視頻,會讓你的網(wǎng)站與眾不同。
響應(yīng)式設(shè)計:隨著移動端的增長,手機已經(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è)計確實比較復雜,但是這個趨勢會一直繼續(xù)下去,對于產(chǎn)品、公司而言,還是需要量力而行的進行升級。
色彩趨勢:彩色漸變一直是設(shè)計趨勢,設(shè)計師將大膽的漸變,飽和度更高的漸變運用在設(shè)計中去,讓整體的色彩感覺,更加年輕化與活躍。
除了漸變色,大膽的單色在設(shè)計中運用也會越來越多,整個設(shè)計就一套色彩體系貫穿,大多時候以品牌色的形式去運用,配合留白,對比明顯的字體,整體給人印象深刻。它的優(yōu)勢是色彩干凈,品牌整體感強,但是對設(shè)計師駕馭頁面能力也要求很高,因為大面積的單色,如果用不好就會很刺眼。
插畫也是一種新的表達方式,越來越多的設(shè)計師,插畫師通過插畫表達產(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方向演進的。
等距插畫:未來或許和場景聯(lián)系更緊密,在每年天貓雙11設(shè)計中,互動城的設(shè)計每年基本都是等距插畫風格,它的故事感和畫面感,都能讓人眼前一亮,所以電商的設(shè)計,在短時間內(nèi),大型活動場景基本都離不開這個風格。
隨著內(nèi)容的升級,對內(nèi)容的表達也會被越來越重視,那么如何更好的把內(nèi)容更生動表達出來,插畫就是很好的一個形式,根據(jù)內(nèi)容定制的插畫,在很多產(chǎn)品中被運用到,互聯(lián)網(wǎng)教育,IT等領(lǐng)域。插畫的形態(tài)終于不再是孤零零的只是用戶情感的表達,而是隨著內(nèi)容的升級變化,在產(chǎn)品中發(fā)揮的重要性也越來越大。
作為ui設(shè)計師,進行個人頁面ui設(shè)計時我們需要了解設(shè)計趨勢必然與技術(shù)發(fā)展緊密結(jié)合,平時就要和我們設(shè)計進行結(jié)合,在滿足用戶體驗的同時,做好我們的設(shè)計。
填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc