首頁

App界面設(shè)計:構(gòu)建用戶體驗的五大核心部分

藍(lán)藍(lán)設(shè)計的小編

在數(shù)字化時代,App已成為人們?nèi)粘I畈豢苫蛉钡囊徊糠?,無論是社交娛樂、在線購物、知識學(xué)習(xí)還是工作管理,各類App都以其獨特的界面設(shè)計吸引著用戶。一個優(yōu)秀的App界面設(shè)計,不僅能夠提升用戶的使用體驗,還能有效促進(jìn)用戶留存和轉(zhuǎn)化。那么,App界面設(shè)計究竟包括哪幾部分呢?本文將從五個核心部分進(jìn)行探討。

App界面設(shè)計的風(fēng)格有哪些

藍(lán)藍(lán)設(shè)計的小編

在移動應(yīng)用(App)的設(shè)計領(lǐng)域中,界面設(shè)計風(fēng)格是塑造應(yīng)用獨特性和提升用戶體驗的重要元素。隨著設(shè)計理念和技術(shù)的不斷進(jìn)步,App界面設(shè)計風(fēng)格也呈現(xiàn)出多樣化的趨勢。本文將介紹幾種主流的App界面設(shè)計風(fēng)格,幫助設(shè)計師和開發(fā)者更好地理解和應(yīng)用。

App界面設(shè)計

1. 簡約風(fēng)格
簡約風(fēng)格強(qiáng)調(diào)界面的簡潔明了,注重信息的清晰呈現(xiàn)。這種風(fēng)格通常以白色或淡色為背景,使用簡單的圖形和圖標(biāo),避免過多的視覺元素干擾用戶視線。簡約風(fēng)格的設(shè)計能夠使用戶迅速找到所需功能,體驗流暢。它適用于大多數(shù)類型的應(yīng)用,特別是那些需要高效信息傳遞和快速操作的應(yīng)用。

2. 扁平化風(fēng)格
扁平化風(fēng)格是一種簡潔而現(xiàn)代化的設(shè)計風(fēng)格,它摒棄了傳統(tǒng)界面設(shè)計中的陰影、高光等立體效果,強(qiáng)調(diào)形狀和色彩的使用。扁平化設(shè)計注重簡約和抽象,通過簡潔的圖形和鮮明的色彩搭配,營造出清新、時尚的視覺效果。這種風(fēng)格不僅美觀大方,而且能夠提高應(yīng)用的加載速度和響應(yīng)速度,適用于各種類型的應(yīng)用。

App界面設(shè)計

3. 擬物風(fēng)格
擬物風(fēng)格注重界面的真實感和細(xì)節(jié)表現(xiàn)。在設(shè)計時,會模擬真實物體的材質(zhì)、光影和紋理,使用戶在使用時產(chǎn)生更強(qiáng)烈的沉浸感。這種風(fēng)格常見于模擬真實世界的App應(yīng)用,如天氣預(yù)報、模擬游戲等。擬物風(fēng)格的設(shè)計能夠增加應(yīng)用的趣味性和互動性,但也可能導(dǎo)致界面過于復(fù)雜和繁瑣。

4. 抽象藝術(shù)風(fēng)格
抽象藝術(shù)風(fēng)格的App界面設(shè)計強(qiáng)調(diào)個性化和創(chuàng)意。通過運(yùn)用色彩、形狀和線條等抽象元素,創(chuàng)造出獨特的視覺效果。這種風(fēng)格適合追求個性和創(chuàng)意的用戶群體,能夠吸引他們的注意力并激發(fā)他們的興趣。然而,抽象藝術(shù)風(fēng)格的設(shè)計也可能對部分用戶造成理解上的困擾。

App界面設(shè)計

5. 半扁平化風(fēng)格
半扁平化風(fēng)格是扁平化風(fēng)格的一種變體,它在保持扁平化設(shè)計簡潔性的同時,適當(dāng)加入了一些立體效果和陰影效果。這種風(fēng)格既保留了扁平化設(shè)計的優(yōu)點,又增加了界面的層次感和立體感,使得界面更加生動和有趣。半扁平化風(fēng)格的設(shè)計適用于需要平衡美觀性和實用性的應(yīng)用。

6. 三維設(shè)計風(fēng)格
三維設(shè)計風(fēng)格強(qiáng)調(diào)界面的立體感和空間感,通過三維圖形和動畫效果來呈現(xiàn)內(nèi)容。這種風(fēng)格能夠給用戶帶來強(qiáng)烈的視覺沖擊力和沉浸感,但也可能導(dǎo)致界面過于復(fù)雜和難以操作。三維設(shè)計風(fēng)格適用于那些需要展示復(fù)雜數(shù)據(jù)或場景的應(yīng)用,如游戲、虛擬現(xiàn)實應(yīng)用等。

App界面設(shè)計

7. 漸變風(fēng)格
漸變風(fēng)格通過色彩漸變來營造柔和、流暢的視覺效果。這種風(fēng)格的設(shè)計能夠增加界面的層次感和動態(tài)感,使得界面更加美觀和吸引人。漸變風(fēng)格適用于需要強(qiáng)調(diào)色彩變化和氛圍營造的應(yīng)用,如音樂、社交應(yīng)用等。

綜上所述,App界面設(shè)計的風(fēng)格多種多樣,每種風(fēng)格都有其獨特的特點和適用場景。設(shè)計師在選擇設(shè)計風(fēng)格時,需要根據(jù)應(yīng)用的功能需求、用戶群體以及市場趨勢來綜合考慮。通過靈活運(yùn)用不同的設(shè)計風(fēng)格,可以創(chuàng)造出既美觀又實用的App界面,提升用戶體驗和滿意度。

怎么設(shè)計出極簡主義風(fēng)格的APP界面

藍(lán)藍(lán)設(shè)計的小編

在當(dāng)今這個信息爆炸的時代,極簡主義設(shè)計風(fēng)格以其簡潔、清晰、不張揚(yáng)的特點,逐漸成為了App界面設(shè)計的一股清流。極簡主義不僅僅是一種審美趨勢,更是一種生活哲學(xué),它倡導(dǎo)去除冗余,追求本質(zhì),讓設(shè)計回歸純粹。那么,如何設(shè)計出極簡主義風(fēng)格的App界面呢?以下是一些關(guān)鍵要素和步驟。

App界面設(shè)計

1. 明確目標(biāo)與定位
首先,明確你的App的目標(biāo)用戶群體以及其核心功能。極簡主義設(shè)計并不意味著簡單或空洞,而是要在滿足用戶需求的基礎(chǔ)上,通過精簡設(shè)計元素來實現(xiàn)高效的信息傳達(dá)。因此,在設(shè)計之初,就需要對App的目標(biāo)和定位有清晰的認(rèn)識,確保每一個設(shè)計元素都有其存在的必要性。

2. 精簡色彩與排版
色彩和排版是極簡主義設(shè)計的重要組成部分。在色彩選擇上,通常采用一到兩種主色調(diào),并輔以少量的輔助色,以營造簡潔、統(tǒng)一的視覺效果。排版方面,則要注重文字的可讀性和整體布局的均衡性,避免使用過多的字體和字號,保持界面的清晰和易讀性。

App界面設(shè)計

3. 去除冗余元素
極簡主義設(shè)計的核心在于去除冗余,只保留必要的設(shè)計元素。在App界面設(shè)計中,這意味著要仔細(xì)審視每一個圖標(biāo)、按鈕、圖片等元素,確保其對于用戶來說是必要且有用的。不必要的元素不僅會分散用戶的注意力,還會增加用戶的認(rèn)知負(fù)擔(dān),降低使用效率。

4. 強(qiáng)化視覺層次
雖然極簡主義設(shè)計追求簡潔,但并不意味著所有元素都要平等對待。在設(shè)計中,需要通過色彩、大小、位置等視覺元素來構(gòu)建視覺層次,引導(dǎo)用戶的視線流動。重要的信息應(yīng)該更加突出,以便用戶能夠快速找到并理解。

App界面設(shè)計

5. 注重細(xì)節(jié)與體驗
極簡主義設(shè)計并不意味著可以忽視細(xì)節(jié)和用戶體驗。相反,正是因為其簡潔的特點,才更需要注重每一個細(xì)節(jié)的處理。比如,按鈕的點擊反饋、頁面轉(zhuǎn)場的動畫效果、錯誤信息的提示方式等,都需要經(jīng)過精心設(shè)計,以確保用戶在使用過程中感到舒適和愉悅。

6. 持續(xù)優(yōu)化與迭代
設(shè)計是一個不斷優(yōu)化和迭代的過程。在極簡主義風(fēng)格的App界面設(shè)計中,更需要通過用戶反饋和數(shù)據(jù)分析來不斷優(yōu)化設(shè)計細(xì)節(jié),提升用戶體驗。同時,也要保持對設(shè)計趨勢和技術(shù)發(fā)展的敏感度,及時調(diào)整設(shè)計策略以適應(yīng)市場和用戶的變化。

App界面設(shè)計

總之,設(shè)計出極簡主義風(fēng)格的App界面需要設(shè)計師具備深厚的專業(yè)素養(yǎng)和敏銳的洞察力。通過明確目標(biāo)與定位、精簡色彩與排版、去除冗余元素、強(qiáng)化視覺層次、注重細(xì)節(jié)與體驗以及持續(xù)優(yōu)化與迭代等步驟,可以打造出既美觀又實用的極簡主義風(fēng)格App界面。

App界面設(shè)計包括哪幾部分

藍(lán)藍(lán)設(shè)計的小編

在移動應(yīng)用(App)的設(shè)計與開發(fā)過程中,界面設(shè)計是至關(guān)重要的一環(huán)。它不僅關(guān)乎應(yīng)用的視覺美感,更直接影響到用戶的使用體驗和滿意度。一個優(yōu)秀的App界面設(shè)計,需要綜合考慮多個方面,以確保應(yīng)用既美觀又實用。本文將從幾個關(guān)鍵部分出發(fā),探討App界面設(shè)計所涵蓋的內(nèi)容。

移動app設(shè)計 (8).png

1. 信息架構(gòu)設(shè)計
信息架構(gòu)設(shè)計是App界面設(shè)計的基石,它決定了內(nèi)容如何組織和呈現(xiàn)給用戶。在這一階段,設(shè)計師需要與產(chǎn)品經(jīng)理緊密合作,了解應(yīng)用的功能需求、用戶群體以及業(yè)務(wù)流程。通過制定清晰的信息架構(gòu),設(shè)計師可以確保用戶能夠輕松找到所需信息,提高操作效率。信息架構(gòu)設(shè)計包括確定導(dǎo)航結(jié)構(gòu)、頁面層級、內(nèi)容分類等方面。

2. 交互設(shè)計
交互設(shè)計關(guān)注的是用戶與應(yīng)用之間的交互方式和流程。它旨在通過直觀、自然的操作方式,提升用戶體驗。在交互設(shè)計階段,設(shè)計師需要考慮用戶的行為習(xí)慣和心理預(yù)期,設(shè)計合理的交互模型和界面元素。例如,按鈕的點擊反饋、頁面跳轉(zhuǎn)的動畫效果、表單的填寫邏輯等,都需要經(jīng)過精心設(shè)計。交互設(shè)計的目標(biāo)是讓用戶在使用應(yīng)用時感到流暢、自然,減少認(rèn)知負(fù)擔(dān)。

移動app設(shè)計 (7).png

3. 視覺設(shè)計
視覺設(shè)計是App界面設(shè)計中最為直觀的部分,它關(guān)乎應(yīng)用的色彩搭配、字體選擇、圖標(biāo)設(shè)計、布局排版等方面。視覺設(shè)計需要符合應(yīng)用的整體風(fēng)格和品牌形象,同時考慮用戶的審美需求和視覺習(xí)慣。優(yōu)秀的視覺設(shè)計能夠吸引用戶的注意力,提升應(yīng)用的吸引力和辨識度。在視覺設(shè)計階段,設(shè)計師需要制定統(tǒng)一的視覺規(guī)范,確保應(yīng)用界面的整體性和一致性。

4. 適配性設(shè)計
隨著移動設(shè)備的多樣化,適配性設(shè)計成為App界面設(shè)計中不可忽視的一環(huán)。設(shè)計師需要確保應(yīng)用能夠在不同尺寸、分辨率和操作系統(tǒng)的設(shè)備上良好運(yùn)行。這包括響應(yīng)式設(shè)計、自適應(yīng)布局、多分辨率適配等技術(shù)手段的應(yīng)用。通過適配性設(shè)計,應(yīng)用能夠適應(yīng)更廣泛的用戶群體,提高用戶滿意度和留存率。

移動app設(shè)計 (6).png

5. 用戶體驗設(shè)計
用戶體驗設(shè)計(UX Design)是App界面設(shè)計的核心,它貫穿于整個設(shè)計過程的始終。用戶體驗設(shè)計關(guān)注用戶的整體感受和需求,旨在通過優(yōu)化界面設(shè)計、交互流程、功能布局等方面,提升用戶的滿意度和忠誠度。在用戶體驗設(shè)計階段,設(shè)計師需要進(jìn)行用戶研究、原型測試、數(shù)據(jù)分析等工作,以不斷迭代和優(yōu)化設(shè)計方案。

綜上所述,App界面設(shè)計包括信息架構(gòu)設(shè)計、交互設(shè)計、視覺設(shè)計、適配性設(shè)計和用戶體驗設(shè)計等多個部分。這些部分相互關(guān)聯(lián)、相互影響,共同構(gòu)成了App界面設(shè)計的完整體系。設(shè)計師需要綜合運(yùn)用這些設(shè)計原則和方法,以創(chuàng)造出既美觀又實用的App界面,為用戶提供卓越的使用體驗。

電商APP-分析重設(shè)計

資深UI設(shè)計者

一款A(yù)pp的改版升級,目標(biāo)、分析、動作解析

呼應(yīng) App UI/UX 設(shè)計

資深UI設(shè)計者

“呼應(yīng)”是一款聚焦于進(jìn)出口物流服務(wù)的UGC平臺,為用戶提供內(nèi)容分享、商品發(fā)布、商品咨詢等服務(wù)。

簡潔之美,細(xì)節(jié)成就卓越:打造極致移動端彈窗體驗

ui設(shè)計分享達(dá)人

在移動端應(yīng)用的世界里,彈窗不僅是信息傳遞的橋梁,也是用戶體驗的微妙觸點。一個精心設(shè)計的彈窗能夠在正確的時刻捕捉用戶的注意力,以一種既美觀又功能性強(qiáng)的方式提供必要信息或引導(dǎo)用戶操作。從視覺清晰度到操作簡便性,再到出現(xiàn)的時機(jī)和頻率,每一個細(xì)節(jié)都關(guān)乎著用戶對應(yīng)用的整體感受和滿意度。讓我們一起探索如何通過細(xì)致入微的設(shè)計思考,打造既符合業(yè)務(wù)目標(biāo)又讓用戶感到愉快的移動端彈窗,提升體驗,創(chuàng)造細(xì)節(jié)之美。

小程序ui該怎么做?

資深UI設(shè)計者

一款聚合收款平臺的小程序界面UI復(fù)盤

簡約高效的動效列表設(shè)計:一分鐘搞定Android列表常見需求

前端達(dá)人

RecyclerView作為Android最常用的控件,相信大家都比較熟悉。而作為設(shè)計師的我們,又改怎么利用身邊有限的資源進(jìn)行簡約高效的動效列表設(shè)計呢?本篇文章輕松帶你玩轉(zhuǎn)Android列表動效設(shè)計~

鄭重聲明:本文從設(shè)計角度說明Android列表動效設(shè)計問題,含前端技術(shù),碼農(nóng)慎噴,我是萌妹紙~

 

相信設(shè)計師在設(shè)計到關(guān)于列表的動效問題的時候會很頭痛,例如列表該如何出現(xiàn),又該怎樣結(jié)束~

 

a3fe57486d726ac72525ae6680f5.jpg

 

對于碼農(nóng)哥哥來說也有很大的困擾,那就是,拿到設(shè)計稿的時候,對于動效師提出的各種五花八門的動效感覺就是:我去年買了個表。那么代碼哥哥怎么能夠更加高效的把設(shè)計稿實現(xiàn)呢?看完今天這篇文章相信你會有額外的收獲~

 

4c7257486d2332f875a429097bbb.jpg

 

首先在這里要感謝icon和頁面的設(shè)計師璀瑤女士和碼農(nóng)哥cmychad(文章后面會提到)~

 

在我們公司項目開展的時候,分配給我的項目中有大量的列表設(shè)計及動效設(shè)計,開始的時候感覺無從下手,但是自從在github上發(fā)現(xiàn)碼農(nóng)哥哥cmychad的一個開源項目(項目名稱:BaseRecyclerViewAdapterHelper)的時候,真的是欣喜若狂,在項目實施的時候,公司的安卓開發(fā)遍用上了這個開源項目進(jìn)行開發(fā)~

 

5157574870486ac72525aec9049c.jpg

po上cmychad碼農(nóng)哥哥的鏈接:

 https://github.com/CymChad/BaseRecyclerViewAdapterHelper

 

那這個動效是怎樣展示的呢?

f6145748719332f875a429f0e67d.jpg

 

從上面的GIF圖可以看出

  • 對于開發(fā)來說:優(yōu)化Adapter代碼(減少百分之70%代碼)

  • 添加點擊item點擊、長按事件、以及item子控件的點擊事件

  • 添加加載動畫(一行代碼輕松切換5種默認(rèn)動畫)

  • 添加頭部、尾部、下拉刷新、上拉加載(感覺又回到ListView時代)

  • 設(shè)置自定義的加載更多布局(對于開發(fā))

  • 添加分組(隨心定義分組頭部)

  • 自定義不同的item類型(簡單配置、無需重寫額外方法)

  • 設(shè)置空布局(比Listview的setEmptyView還要好用?。?/p>

     

UI設(shè)計師從此只要考慮樣式問題,開發(fā)也不怕各種古靈精怪的動效了~分分鐘秒殺各類列表動效問題~

4032574872ff32f875a429efc92a.jpg

 

下面po出自己手上項目及用了這個開源項目實現(xiàn)的真機(jī)版的效果圖:

 

 

效果圖:

94fd574874cc6ac72525aea088a8.jpg

c0aa574874db32f875a4294790d4.jpg

 

 

真機(jī)上的效果:

 

 

 

項目內(nèi)很多列表的表現(xiàn)都是參照碼農(nóng)哥哥cmychad的項目:BaseRecyclerViewAdapterHelper

真的很好用~今天在谷歌瀏覽器里面逛的時候竟然發(fā)現(xiàn)在Google Play上也能看到~

 

 

a76857487b6232f875a4296f5cd2.jpg

 

 

po上鏈接:

https://play.google.com/store/apps/details?id=com.chad.baserecyclerviewadapterhelper

 

(我就是這么大方~哈哈~)

 

2c54574877bc6ac72525aef831ff.jpg

分分鐘帶你飛離擾人的列表動效問題~設(shè)計獅們,喊上你們的程序猿來試試吧~相信你會感嘆,為啥我不早點用上BaseRecyclerViewAdapterHelper呢~

 

 

當(dāng)然,除了感嘆,我有一個不成熟的小建議~那就是你或許也可以在下面輕輕的點贊~我會很感動的!

 

藍(lán)藍(lán)設(shè)計(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者:vintuvintu
鏈接:https://www.zcool.com.cn/article/ZNDA4OTky.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

移動互聯(lián)網(wǎng)產(chǎn)品的設(shè)計模式-列表

前端達(dá)人

細(xì)分移動互聯(lián)網(wǎng)產(chǎn)品的設(shè)計模式

在講解列表之前,我先跟大家介紹一下一個經(jīng)典的交互設(shè)計框架,這個框架復(fù)合了一般用戶的使用習(xí)慣,同時也是人們處理信息的基本模式——“首頁——列表頁——詳情頁”。

 

“首頁——列表頁——詳情頁”是互聯(lián)網(wǎng)發(fā)展過程中逐漸形成的一般規(guī)律,謂之為互聯(lián)網(wǎng)發(fā)展的經(jīng)典框架也不為過。為什么呢?因為互聯(lián)網(wǎng)最開始的時候,信息量并不大,所以有一個詳情頁就足夠了。后來因為信息量逐漸增多,自然而然就會出現(xiàn)篩選信息的需求,因此就出現(xiàn)了列表頁。后來,列表頁再也無法承載指數(shù)級增長的信息了,所以搜索的功能應(yīng)運(yùn)而生,于是便出現(xiàn)了首頁(入口)。

 

觀察互聯(lián)網(wǎng)早期發(fā)展的歷史可以得到佐證:剛開始的時候有雅虎和美國在線等幾個新聞?wù)军c就足以滿足人們獲取資訊的需求了,后來因為信息逐漸增多,所以急需篩選和搜索信息,于是谷歌就崛起了,成為下一個流量入口。中國互聯(lián)網(wǎng)的歷史進(jìn)程也大致相同:互聯(lián)網(wǎng)第一波浪潮是搜狐、新浪等門戶網(wǎng)站,第二波才是百度。

 

可以說“首頁——列表頁——詳情頁”不僅僅可以應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品的設(shè)計中去,它更是一種很重要的思維方式,可以應(yīng)用于日常生活中的方方面面。

 

以上介紹了列表是如何產(chǎn)生的,也提到了用戶在列表頁上的主要行為就是對信息進(jìn)行篩選和比較,以便讓其做出決策,決定進(jìn)入哪個具體條目去了解相關(guān)詳情。因此列表頁承載的是用戶對下一層信息的概況了解,是詳情頁信息的縮略版。

 

如果列表中的條目比較多,那么列表就會包含某些排序規(guī)則或分組規(guī)則,這樣會讓列表中條目的呈現(xiàn)方式規(guī)律一點,以便用戶快速查找。有的會按照時間順序來排序,有的會按照字母表來排序,也有的會用標(biāo)簽進(jìn)行分組等等。假如條目很多,一個頁面放不下,那就需要分頁,所以列表頁底部常常會出現(xiàn)翻頁器。有時也會出現(xiàn)“無限加載”這種處理方式,例如花瓣。假如信息更多的話,那就需要加入搜索功能了。

 

好了,接下來我們要介紹是:列表的具體形式。

 

 

• 垂直式列表 •

 

垂直式列表是列表的最基本形式,無論是移動端還是PC端都可以看到這種布局方式。這是一種非常干凈和清晰的列表呈現(xiàn)方式,用戶非常容易理解,也很容易找到自己想要的目標(biāo)。

需要注意的是,用戶的瀏覽習(xí)慣一般都是“從左往右,從上往下”的,所以垂直式列表一般采用的都是左對齊的樣式。

 

再者,設(shè)計師在設(shè)計的時候需要平衡好條目的詳細(xì)程度和條目數(shù)量之間的關(guān)系。因為條目內(nèi)容越詳細(xì),條目所占空間就會越大,相應(yīng)地單屏上條目的顯示數(shù)量就會越少。具體情況還得從需求出發(fā)。

 

例如淘寶訂單列表頁,對于用戶而言,用戶往往會關(guān)注商品訂單的交易狀態(tài)、物流狀況等等。因為條目的內(nèi)容相對詳細(xì),所以用戶就沒有必要去查看訂單的具體詳情,這樣會有效地縮短用戶的操作路徑。但是把垂直式列表應(yīng)用到通訊錄中,情況就不同了,此時用戶必然是希望可以同一時間內(nèi)瀏覽足夠多的聯(lián)系人,以便快速找到目標(biāo),所以通訊錄條目的信息一般都很簡潔,一般就只有“聯(lián)系人頭像”和“聯(lián)系人名稱”。

需要補(bǔ)充的是,垂直式列表一般有以下三種模式:標(biāo)準(zhǔn)模式、圖文結(jié)合模式以及控制模式。

 

 

• 橫向式列表 •

 

所謂的橫向式列表也就是我們常說的輪播圖和走馬燈,它也是APP中一種很常見的列表形式。這種形式只著重展示一個條目,往往位于頁面的上方作為廣告位展示,用戶通過左右手勢滑動來聚焦到當(dāng)前的內(nèi)容。

 

一般來說,橫向式列表的條目數(shù)量不能太多,控制在5~7個以內(nèi)為好,以避免用戶操作疲勞。在設(shè)計上可提供暗示,例如顯示下一張的部分內(nèi)容,或者添加分頁指示器,這樣讓用戶在瀏覽條目時保持清晰的方向感和對數(shù)量的認(rèn)知。

 

 

 

• 網(wǎng)格式列表 •

 

剛才介紹了縱向維度以及橫向維度的列表,那么在移動端還有一種兼顧了兩種維度的列表的形式——網(wǎng)格式列表。這也是一種非常常用的列表形式,網(wǎng)格式列表基本上都是以展示圖片為主,偶爾會配合一些文字說明。假如想要展示大量的圖片,那么網(wǎng)格式列表無疑是最好的選擇。

相比較網(wǎng)格式列表與垂直式列表,前者大多是用于展示文字信息,界面會顯得比較干凈有效。后者則更具情感魅力,會讓界面更加富有感染力。

這里還要向大家介紹的是網(wǎng)格式列表的變體——瀑布流。標(biāo)準(zhǔn)的網(wǎng)格式列表是“田字格”的形式,排版上還是有一絲嚴(yán)謹(jǐn)和規(guī)范的意味,而瀑布流的排版樣式則顯得較為隨意,常見于一些圖片瀏覽類的軟件,如花瓣等。

 

 

 

• 總結(jié) •

 

文章開頭提到“用戶在列表頁上的主要行為就是對信息進(jìn)行篩選和比較”,也就意味著列表頁有著“分流/導(dǎo)航”的作用。

 

其實以上三種列表形式在某種意義上來說也是三種導(dǎo)航模式。垂直式列表對應(yīng)的是列表導(dǎo)航,橫向式列表對應(yīng)的是走馬燈導(dǎo)航,網(wǎng)格式列表對應(yīng)的是圖示導(dǎo)航。

 

藍(lán)藍(lán)設(shè)計(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 



作者:麥克優(yōu)艾
鏈接:https://www.zcool.com.cn/article/ZNzI0NjEy.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

日歷

鏈接

個人資料

存檔