文章插圖

文章插圖
跟著互聯網的發展和智能手機的普及,移動運用成了人們最酷愛的寵兒,許多移動APP也會依據用戶的需求而更迭自身的UI設計 。
界面作為咱們認識APP的榜首道門檻,是APP的“體面”,更是不行忽視的一項要點設計,為了樹立有用的UI,設計師需求依據移動端APP自身的特性和當下趨勢,作出不一樣的改動 。
但當今設計趨勢瞬息萬變,在沒有統一標準的設計規矩之下,緊跟設計趨勢,才干確保UI對用戶的吸引力常在 。
今天,四海方城威客網就給咱們介紹幾種常見,也是時下比較流行的移動端UI界面類型,希望對咱們有幫助 。
閃屏頁
每次翻開App時榜首眼看到的便是閃屏頁(又稱發動頁),該頁面承載了用戶對這款App的榜首印象,因而對設計的要求是很講究的 。閃屏頁給用戶觀看的時刻很短,一般只要一秒的時刻,因而,如何在這么短的時刻內表達出產品的定位便是設計師需求要點考慮的問題 。
品牌宣揚型
App的閃屏頁是為了表現產品的品牌而設定的,首要組成部分是“產品稱號+產品形象+產品廣告語”,如圖所示 。品牌宣揚型的閃屏頁是最為直白的閃屏頁,設計較為精簡,力求凸顯品牌特點 。
節假關懷型
當節假日降臨,許多App會經過營建節假日的氣氛來表現人文關懷 。當眼前出現一幅樸實的節假日插圖時,觀者會從內心感受到軟件帶來的祝愿,從而具有夸姣的心情 。
QQ音樂在設計中,對品牌的LOGO進行了延展設計,以凸顯節假日的元素 。這種設計不只能夠加強與用戶的情感溝通,還能加深用戶的品牌的印象,如圖所示 。
有時候產品在運營過程中會做一些活動或許廣告,推行內容一般會顯現在閃屏頁上 。活動推行型的閃屏頁多以插畫方法表現 。
要側重表現的是活動主題及時刻節點,營建熱鬧的活動氣氛 。在設計時必定要抓住主次,防止由于繁瑣的場景影響到主題的表現,如圖所示 。
一個好的App引導頁能夠迅速捉住運用者的眼球,讓他們快速了解App的價值和功用,起到很好的引導作用 。有一句話是這么說的:“優異的UI能夠造就App的點擊率” 。
在做引導頁之前,咱們首先要學會定位,了解App的方針用戶群 。四海方城威客網簡略來說,引導頁分為功用介紹型、情感帶入型和搞笑型3種類型 。
功用介紹型(根底型)
功用介紹型引導頁是最根底的一種引導頁 。這種引導頁要確保信息展現一針見血,切忌嚕蘇、表達不清 。在這樣一個網絡化、碎片化的時代,用戶逗留在引導頁上的時刻越來越短,瀏覽時刻一般不會超過3秒 。
在這寶貴的3秒鐘內,設計師需求把簡潔明了、通俗易懂的案牘和界面呈現給用戶,如圖所示 。請記住這句話:“用戶需求便是你的案牘,功用介紹型的比如比比皆是 。
情感帶入型的引導頁能經過案牘和配圖,把用戶需求經過某種方法表現出來,引導用戶去考慮這個App的價值,如圖所示 。這種類型的引導頁要求設計形象化、生動化、立體化,能夠增強產品的預熱作用,一起給用戶帶來某種驚喜 。
搞笑型引導頁的閱覽量一般都比較高,拼的是設計作用或動畫作用,如圖所示 。
浮層引導頁
浮層引導頁一般出現在功用操作提示中,是為了能夠讓用戶在運用過程中更好地解決問題而提前設計的用戶教育 。
這種引導頁的浮層一般以手繪表現方法為主,會運用箭頭和圓圈來進行設計,并用高亮的色彩來杰出信息,一起選用蒙版方法來加強杰出功用,如圖所示 。
空白頁分為首次進入型和過錯提示型兩種 。四海方城威客網簡略來說,空白頁便是由于網絡問題造成的頁面或許是沒有內容的頁面,例如頁面中顯現“沒有信息”“列表為空”“過錯”和“無網絡”等內容的頁面就屬于空白頁 。
在一般狀況下,這種頁面都會經過文字信息給用戶提示 。好的空白頁面會花費不少設計時刻,由于這種頁面不只是用于提示,還會引導用戶進行實質性的操作,從而加強用戶對產品的黏性 。要注意,空白頁的設計必定要簡潔明了 。
在用戶榜首次翻開運用的時候,App會利用空白頁的提示引導用戶進行操作,指引用戶找到需求的內容 。
過錯提示型
過錯提示型的空白頁不只在網頁中很常見,并且在App中也經常出現,例如顯現“找不到頁面”或許“網絡中斷”等,如圖所示 。這種頁面中一般會指引用戶解決問題,例如點擊“改寫頁面”按鈕能夠改寫頁面等 。
不同功用的App有著不一樣的主頁模塊,挑選一種適合產品自身的主頁展現方法十分重要 。現在,App主頁同質化現象越來越嚴峻,頁面根本都朝著一個方向去設計 。
作為設計師,必定要做到多看多用才干夠找到更適合產品自身的展現方法 。下面介紹一下主頁最常見的4種表現方法,分別是列表型主頁、圖標型主頁、卡片型主頁和歸納型主頁,不同類型的主頁布局承載著不同的內在 。
列表型
列表型主頁是指在一個頁面上展現同一個等級的分類模塊 。模塊由標題案牘和圖畫組成,圖畫可所以照片,也可所以圖標,如圖所示 。列表型的主頁更便利點擊操作,上下滑動也能夠檢查更多的內容 。
當主頁包含幾個首要的功用時,能夠采納圖標的方法進行展現,如圖所示 。圖標型的主頁最好是在榜首屏展現完整,并將點擊做到最簡略 。
在遇到操作按鈕、頭像和文字等信息比較復雜的狀況時,能夠選用卡片型主頁方法 。卡片型主頁能讓分類中的按鈕和信息緊密聯系在一起,讓用戶一望而知,一起能還有用地加強內容的點擊性,如圖所示 。
電商類產品模塊的表現方法比較多,有圖標方法也有卡片方法等 。如何才干讓多塊內容在頁面中顯現得明晰易讀,這是對設計師能力的考驗 。
歸納型的主頁設計要特別注意分割線和背景色彩的區別不能太過明顯,挑選比較淡的分割線和背景色來區別模塊即可,由于要確保頁面模塊的整體性,如圖所示 。
在App中,個人中心頁又稱為“我的”頁面,一般設計在底部菜單欄的最右側 。交際運用中,個人中心有兩種人物的區別,一個是自己的主頁面,還有一個是別人的中心頁面 。
自己的個人頁面能夠自己進行修改,而別人的頁面是供用戶重視或進行私信溝通的 。所以,個人中心頁與其他頁面在功用上需求有場景區別 。
個人中心頁首要由頭像、個人信息和內容模塊組成,一般會選用頭像居中對齊的方法進行設計,意圖是為了表現當前頁面的信息都與自己有關 。頭像一般會選用圓形,由于這樣看起來更為和諧,一起畫面也會顯得更為豐滿,如圖所示 。
在運用軟件查找或點擊分類查找后會出現結果頁面 。結果頁面一般會以列表的方法來表現,包含單行列表和雙行列表兩種,展現的內容為“圖片+稱號+介紹” 。另外,還能夠用時刻軸和圖庫的方法來設計列表頁 。列表頁的設計盡管簡略,但卻困擾著不少設計師 。
整體而言,設計列表頁時,需求遵循這些原則:留白空間要張弛有度,且要有親疏之分;對齊的方法要規整;粗細元素的組合要有節奏感;需求要點杰出的元素的色彩要明亮;列表的層次感要清楚;在用真假方法進行結合設計時,要確保實的目標在前,虛的目標在后 。
單行列表
大多數消費類產品的結果頁面都會以單行列表的方法進行展現,左邊為圖,右邊為文字信息、評分和價格等,這樣的展現方法易于用戶閱覽,如圖所示 。圖片能夠誘導用戶進行點擊,文字則用來解說商品 。
雙行列表頁的表現方法愈加節約空間,每個卡片的排布方法為上面是圖片下面是文字,能夠讓頁面顯得更為豐滿,如圖所示 。
為了加強內容的前后時刻聯系,一般會運用時刻軸的方法來設計列表頁,這樣的表現方法能夠更好地凸顯每條信息之間的聯系,讓用戶閱覽起來更有條理性,如圖 所示 。時刻軸列表頁的展現方法為左邊是時刻軸上各節點,右邊是與時刻節點對應的內容 。
【app界面設計圖模板 手機app頁面設計模板】圖庫列表頁首要出現在相冊或圖片修改類App中,其間相冊的圖庫列表頁有文檔和圖片平鋪兩種顯現方法 。為了讓散布更為均勻規整,圖片一般會選用正方形的方法進行擺放,如圖所示 。
播映頁面包含音樂播映頁、視頻播映頁和音頻播映頁 。在音樂類App中,一般會將歌手或CD的大圖居中對齊放在中上方,下方擺放可操作性的按鈕,如圖所示 。
概況頁
概況頁是整個App中發生消費的頁面,頁面中的內容比較豐富 。在閱覽類App中,概況頁首要以圖文信息為主,相對來說愈加重視文字的可讀性,所以會挑選比較大的字號來杰出標題和內容,如圖所示 。
在交際軟件中,注冊登錄頁面是必不可少的,這類頁面的設計必須要做到易用簡潔 。注冊登錄頁要考慮喚起鍵盤的時候文字信息會不會被遮擋,輸入框的寬度是否易于操作,文字提示是不是到達最精簡程度等 。
例如有些輸入框顯現的提示文字是“請您輸入郵箱”,其實只需求提示“郵箱”兩個字就足夠了,所以注冊登錄頁的設計在重視可操作性的一起必定要注意文字的表達是否言簡意賅,如圖所示 。
能夠減少用戶的填寫壓力,如圖所示 。在分類比較多的狀況下,選用的背景和分割線的色彩不宜太重,否則會讓頁面顯得瑣碎不堪 。
- app推廣渠道商 app營銷推廣渠道
- 中國哲學書電子化計劃打不開 中國哲學書電子化計劃app
- ip網絡計算器app ip子網劃分計算工具app
- win10在登陸界面進不去 windows10在登陸界面進不去
- 銀河app下載安裝 銀河手機app下載
- app在蘋果上架需要什么條件 在app store上架app需要什么資料
- win10輸入密碼界面卡死 win10開機輸密碼界面死機
- 蘋果電腦翻譯軟件哪個好 電腦翻譯軟件哪個好 app
- ipad上的app怎么卸載軟件 ipad 怎么卸載app
- app試玩平臺大全2020手機兼職手賺排行榜 app試玩平臺大全安卓
