想成為一名優(yōu)秀的設(shè)計(jì)師信息流頁面，就需要對不同類型的頁面進(jìn)行特色化設(shè)計(jì)，從而提高頁面的可用性和獨(dú)特性，這很考驗(yàn)設(shè)計(jì)師對頁面的分析能力和表現(xiàn)能力。

今天米醋跟大家介紹一下列表頁、播放頁、詳情頁以及可輸入頁面的設(shè)計(jì)要領(lǐng)。

列表頁

在使用軟件搜索或點(diǎn)擊分類查找后會出來結(jié)果頁面，在結(jié)果頁面中通常會以列表的形式來體現(xiàn)，包括單行列表和雙行列表兩種，展示的內(nèi)容為“圖片+名稱+介紹”。另外，還可以用時間軸和圖庫的形式來設(shè)計(jì)列表頁。列表頁的設(shè)計(jì)雖然簡單，但卻困惑著不少設(shè)計(jì)師。

總體而言，在設(shè)計(jì)列表頁時，需要遵循這些原則：留白空間要張弛有度，且要有親疏之分；對齊的方式要規(guī)整；粗細(xì)元素的組合要有節(jié)奏感；需要重點(diǎn)突出的元素的顏色要明亮；列表的層次感要分明；在用虛實(shí)方式進(jìn)行結(jié)合設(shè)計(jì)時，要保證實(shí)在前，虛在后。

01.單行列表

大多數(shù)消費(fèi)類產(chǎn)品的結(jié)果頁面都會以單行列表的形式進(jìn)行展示，左邊為圖，右邊為文字信息、評分和價(jià)格等，這樣的展示方式易于閱讀。圖片來誘導(dǎo)用戶進(jìn)行點(diǎn)擊，文字則用來解釋商品。

02.雙行列表

雙行列表頁的表現(xiàn)形式更為節(jié)省空間，每個卡片排布方式為上面是圖片下面是文字，這種表現(xiàn)形式可以讓頁面顯得更為飽滿。

03.時間軸

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

04.圖庫列表

圖庫列表頁主要出現(xiàn)在相冊或圖片編輯類的軟件中，其中相冊有文檔和圖片平鋪兩種顯示方式，為了讓分布更為均勻規(guī)整，圖片通常會采用正方形的方式進(jìn)行排列。

播放頁面

播放頁面有音樂播放頁、視頻播放頁和音頻播放頁。在音樂類的播放軟件中通常會將歌手或CD的大圖放在上面進(jìn)行居中對齊，而下面會擺放可操作性的按鈕。

在視頻播放頁中，為了增強(qiáng)用戶的易用性，通常會采用兩種播放方式，一種是在信息流或詳情頁面中直接預(yù)覽，另外一種是全屏預(yù)覽視頻。前者在內(nèi)容頁面中進(jìn)行播放是為了加強(qiáng)界面的可操作性，例如選集、點(diǎn)評和分享等功能，而全屏播放視頻的目的是讓用戶體驗(yàn)更舒服、更沉浸。

詳情頁

詳情頁面是整個App產(chǎn)生消費(fèi)的頁面，頁面中的內(nèi)容比較豐富。在閱讀類的App中，詳情頁主要以圖文信息為主，相對來說更注重文字的可讀性，所以會選擇相對較大的字號信息流頁面，因?yàn)樾枰怀鰳?biāo)題和內(nèi)容。

在電商類的應(yīng)用中，主要目的是引導(dǎo)用戶去購買產(chǎn)品，所以購買的按鈕會一直呈現(xiàn)在界面的最上面，從而方便用戶購買商品。

可輸入頁面

在社交軟件中，注冊登錄頁面是必不可少的，這類頁面的設(shè)計(jì)務(wù)必要做到易用方便。注冊登錄頁要考慮喚起鍵盤的時候會不會被遮擋，輸入框的寬度是否易于操作，文字的提示是不是最精簡等情況。在輸入文字之前一般會顯示提示文字，文字的描述要做到足夠精簡，例如有些輸入框顯示的提示文字是“請您輸入郵箱”，其實(shí)只需要提示“郵箱”兩個字就足夠了，所以注冊登錄頁的設(shè)計(jì)在注重可操作性的同時一定要注意文字的表達(dá)是否言簡意賅。

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

好啦！今天就介紹到這里！

明天米醋將給大家

帶來頁面設(shè)計(jì)的實(shí)際操作案例

免責(zé)聲明：本文系轉(zhuǎn)載自其它媒體，版權(quán)歸原作者所有；本站遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會明確標(biāo)注作者和來源，旨在傳遞信息，不代表本站的觀點(diǎn)、立場和對其真實(shí)性負(fù)責(zé)。如需轉(zhuǎn)載，請聯(lián)系原作者。內(nèi)容會稍有編輯，如果來源標(biāo)注有誤或侵犯了您的合法權(quán)益等其他原因不想在本站發(fā)布，來信即刪。投稿等其它問題請聯(lián)系本站

文章來源:http://toutiao.com/group/6769380039982055940/