9種常見(jiàn)的移動(dòng)端產(chǎn)品信息布局方式
嚴(yán)格意義上的九宮格是3行3列，如果列數(shù)或行數(shù)增加，我們暫且都泛稱為九宮格式（也有人將它們區(qū)分開(kāi)來(lái)，稱之為“陳列館式”或“網(wǎng)格式”）
優(yōu)點(diǎn)：節(jié)省空間，一行可以放置多個(gè)入口。清晰明朗、簡(jiǎn)潔。一般會(huì)突出icon圖標(biāo)，便于記憶和查找。
缺點(diǎn)：因?yàn)榭臻g有限，不能放置太多次級(jí)預(yù)覽內(nèi)容。當(dāng)入口過(guò)多時(shí)，也不利于辨識(shí)和查找。
2. 橫向排列式
與豎向排列相對(duì)應(yīng)，信息單元也可以是橫向排列。在交互操作上，這種方式需要左右滑動(dòng)來(lái)切換信息單元，又稱“旋轉(zhuǎn)木馬式”。
舉例：下圖中[新書(shū)搶鮮]模塊的布局方式
優(yōu)點(diǎn)：縮小在高度上占據(jù)的空間，利于界面其他信息的展示。當(dāng)信息單元占據(jù)的幅度較大時(shí)（例如圖片類(lèi)應(yīng)用），有利于用戶目光聚焦。
缺點(diǎn)：左右滑動(dòng)的交互有時(shí)候不方便。當(dāng)信息單元面積較大時(shí)，無(wú)法跳躍性定位到想看的信息單元，只能一個(gè)一個(gè)左右切換，直到切換到想看的那個(gè)為止。
3. 列表式
列表式為豎向排列，每個(gè)信息單元有相同的結(jié)構(gòu)。
優(yōu)點(diǎn)：符合人們從上往下閱讀的習(xí)慣，順暢快捷，瀏覽體驗(yàn)比較好。因?yàn)橛薪y(tǒng)一的信息單元格式，頁(yè)面整體比較整潔、清晰。每個(gè)信息單元根據(jù)需要可放置標(biāo)題、摘要、圖片、標(biāo)簽等元素，供用戶預(yù)覽并預(yù)測(cè)詳細(xì)內(nèi)容。
缺點(diǎn)：當(dāng)信息加載多了以后，容易讓人出現(xiàn)審美疲勞，降低閱覽興趣。信息排序越往后，受到的關(guān)注度自然會(huì)下降。一般采用顏色不同、字號(hào)大小、區(qū)塊劃分等來(lái)區(qū)分重要級(jí)別，增強(qiáng)層次感。
4. 選項(xiàng)卡式
也稱為“tab式”，通過(guò)對(duì)當(dāng)前界面的信息屬性進(jìn)行劃分歸類(lèi)，分為多個(gè)選項(xiàng)，用戶切換即可。App的主導(dǎo)航一般也是用tab的方式切換。
優(yōu)點(diǎn)：不用來(lái)回跳轉(zhuǎn)頁(yè)面層級(jí)，只需要在當(dāng)前頁(yè)面一鍵切換即可看到不同內(nèi)容，方便。用戶清楚地知道自己當(dāng)前所在位置。
缺點(diǎn)：選項(xiàng)卡數(shù)量超過(guò)5個(gè)就會(huì)顯得笨重，如果一行放置不下，需要左右滑動(dòng)才能顯示完所有選項(xiàng)卡，會(huì)降低操作便捷性。
5. 多面板式
對(duì)于分類(lèi)比較多，每個(gè)類(lèi)別囊括的內(nèi)容也多的情況下，可用多個(gè)面板的形式來(lái)展示。
優(yōu)點(diǎn)：可以清楚地知道當(dāng)前在哪個(gè)位置。當(dāng)前界面容納多個(gè)入口，同級(jí)別之間切換，不需要在不同層級(jí)的頁(yè)面來(lái)回切換，比較方便。
缺點(diǎn)：面板獨(dú)占一列空間，整個(gè)界面顯得比較擁擠。
6. 手風(fēng)琴式
這種方式也有人稱為“行為擴(kuò)展式”。它是在當(dāng)前界面點(diǎn)擊一級(jí)信息，展開(kāi)二級(jí)信息的方式，點(diǎn)擊時(shí)再展開(kāi)，再點(diǎn)擊可縮回，有點(diǎn)類(lèi)似手風(fēng)琴縮展的動(dòng)作。
優(yōu)點(diǎn)：只需要在當(dāng)前頁(yè)展開(kāi)二級(jí)信息，不需要跳轉(zhuǎn)頁(yè)面，操作比較方便，也有利于用戶認(rèn)知信息的架構(gòu)。
缺點(diǎn)：當(dāng)信息分類(lèi)過(guò)多且需要手動(dòng)再點(diǎn)擊才能收回二級(jí)信息時(shí)，全部展開(kāi)后，不利于跨分類(lèi)跳轉(zhuǎn)。
7. 圖表式
通過(guò)圖表和內(nèi)容的結(jié)合來(lái)展示。
優(yōu)點(diǎn)：圖表比較直觀，表現(xiàn)力更強(qiáng)。
缺點(diǎn)：占據(jù)面積較大，整體界面能承載的信息不夠多。如果圖形和交互動(dòng)作結(jié)合，大多數(shù)用戶可能發(fā)現(xiàn)不了這些交互。
8. 抽屜式
抽屜式適用于隱藏次要功能，讓產(chǎn)品突出核心功能。當(dāng)用戶需要查找某個(gè)功能入口時(shí)，通過(guò)點(diǎn)擊抽屜，在“抽屜”里面進(jìn)行查找。
優(yōu)點(diǎn)：可幫助隱藏一些功能入口，讓產(chǎn)品更簡(jiǎn)約。
缺點(diǎn)：用戶第一次使用時(shí)，因?yàn)榭梢?jiàn)性被減弱，有些功能用戶找不到，提高了他們的使用成本。如果用戶常用的功能被放置在抽屜里，則增加了用戶操作的步驟。
9. 標(biāo)簽式
標(biāo)簽式，顧名思義，就是通過(guò)標(biāo)簽設(shè)置的方法，把信息進(jìn)行分類(lèi)對(duì)應(yīng)為一個(gè)個(gè)標(biāo)簽，或者標(biāo)簽直接作為功能入口（如“熱門(mén)搜索”），便于用戶操作。
優(yōu)點(diǎn)：清晰簡(jiǎn)潔，占據(jù)空間少。便于切換查看對(duì)應(yīng)的內(nèi)容，用戶清楚自己在哪個(gè)分類(lèi)。
缺點(diǎn)：標(biāo)簽不宜過(guò)多，不利于查找。
小結(jié)
移動(dòng)端的產(chǎn)品形式越來(lái)越多樣化，人們總是期望隨時(shí)隨地可以在移動(dòng)端快速獲取自己想要的信息，因?yàn)橛布?guī)格的限制，如何在有限的空間和用戶耐心中爭(zhēng)奪用戶的注意力，隱含了諸多產(chǎn)品設(shè)計(jì)的學(xué)問(wèn)。
以上9種常見(jiàn)移動(dòng)端信息布局方式，只是很淺層的總結(jié)，任何一種方式都沒(méi)有絕對(duì)的優(yōu)劣，不同方式可以互相組合、鑲嵌使用，在具體設(shè)計(jì)時(shí)，需要根據(jù)實(shí)際情況來(lái)思考，在不斷優(yōu)化中找到最合適最有效的方案。
9種常見(jiàn)的移動(dòng)端產(chǎn)品信息布局方式
標(biāo)簽式，顧名思義，就是通過(guò)標(biāo)簽設(shè)置的方法，把信息進(jìn)行分類(lèi)對(duì)應(yīng)為一個(gè)個(gè)標(biāo)簽，或者標(biāo)簽直接作為功能入口（如“熱門(mén)搜索”），便于用戶操作。優(yōu)點(diǎn)：清晰簡(jiǎn)潔，占據(jù)空間少。便于切換查看對(duì)應(yīng)的內(nèi)容，用戶清楚自己在哪個(gè)分類(lèi)。缺點(diǎn)：標(biāo)簽不宜過(guò)多，不利于查找。小結(jié) 移動(dòng)端的產(chǎn)品形式越來(lái)越多樣化，人們總是期...
移動(dòng)端幾種常見(jiàn)的界面設(shè)計(jì)布局
2，陳列式布局 3，九宮格式布局 4，選項(xiàng)卡式布局 5，輪播圖式布局 6，伸展式布局 7，抽屜式布局 8，彈出框式布局 9，橫向拓展式布局 10、多面板式布局 1，列表式布局 特點(diǎn)：內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)。優(yōu)點(diǎn)：1、層次展示清晰 2、視覺(jué)流線從上向下，瀏覽體驗(yàn)快捷 3、可展示...
04八種常見(jiàn)的UI布局方式
7. 多面板布局 - 特點(diǎn)：同時(shí)呈現(xiàn)多個(gè)分類(lèi)及其內(nèi)容。- 優(yōu)點(diǎn)：分類(lèi)位置固定，整體性了解，減少層級(jí)跳轉(zhuǎn)。- 缺點(diǎn)：界面擁擠，容易造成視覺(jué)疲勞。8. 圖表式布局 - 特點(diǎn)：以圖表形式直接展示信息。- 優(yōu)點(diǎn)：直觀性強(qiáng)，總體性突出。- 缺點(diǎn)：詳細(xì)信息顯示有限。每種布局方式都有其獨(dú)特的適用場(chǎng)景和優(yōu)勢(shì)，設(shè)計(jì)師...
最流行的四種移動(dòng)端布局方式,看這一篇文章就夠了
流式布局，就是百分比布局，也稱非固定像素布局。通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。流式布局方式是移動(dòng)web開(kāi)發(fā)使用的比較常見(jiàn)的布局方式。父盒子開(kāi)啟display：flex后，默認(rèn)為不換行，所以使用flex-wrap：wrap；使其換行 使用justify-content: space-...
04八種常見(jiàn)的UI布局方式
8.圖表式布局 支付寶·圖表式布局 特點(diǎn):用圖表的方式直接呈現(xiàn)信息 優(yōu)點(diǎn)：直觀，總體性強(qiáng) 缺點(diǎn)：詳細(xì)信息顯示有限 支付寶作為一個(gè)與金錢(qián)有關(guān)的軟件，它余額寶頁(yè)面選擇了與自身比較符合的圖表式布局，這種布局能直觀詳細(xì)地顯示出信息，很適合用于數(shù)據(jù)、賬單有關(guān)的APP。
移動(dòng)端頁(yè)面布局分析2018-04-07
移動(dòng)端不同于PC端，最大的區(qū)別是屏幕尺寸的限制，相同的內(nèi)容顯示效率要低很多。如果直接按照PC端顯示所有內(nèi)容，頁(yè)面信息自然混亂不堪。作為交互設(shè)計(jì)師需要對(duì)信息進(jìn)行優(yōu)先級(jí)劃分，并且合理布局，提升信息的傳遞效率。下面來(lái)談?wù)勈謾C(jī)界面設(shè)計(jì)中常用到的一些頁(yè)面布局。1. list 布局 優(yōu)點(diǎn) list列表縱向長(zhǎng)度沒(méi)有...
最最最常見(jiàn)的10種移動(dòng)端導(dǎo)航類(lèi)型,都?xì)w納再這兒了!
關(guān)注公眾號(hào)”并非導(dǎo)航類(lèi)型，但值得提及的是，保持簡(jiǎn)潔的界面和易操作性，引導(dǎo)用戶關(guān)注核心功能，而不是分散注意力在非核心區(qū)域。總的來(lái)說(shuō)，每種導(dǎo)航類(lèi)型都有其獨(dú)特的價(jià)值和適用場(chǎng)景。在設(shè)計(jì)移動(dòng)端導(dǎo)航時(shí)，關(guān)鍵在于找到那個(gè)平衡點(diǎn)，確保用戶能輕松、高效地找到所需信息，同時(shí)享受流暢的交互體驗(yàn)。
關(guān)于卡片設(shè)計(jì)的分析與思考
提升視覺(jué)體驗(yàn)則通過(guò)調(diào)整卡片樣式與布局，優(yōu)化用戶感知。形式跟隨內(nèi)容的原則指導(dǎo)設(shè)計(jì)決策，從列表式卡片、九宮格卡片、單一列表卡片到內(nèi)容型卡片，每種形式適應(yīng)不同場(chǎng)景與內(nèi)容需求。卡片設(shè)計(jì)需兼顧內(nèi)容展示與瀏覽體驗(yàn)，避免過(guò)多層級(jí)嵌套與縱向空間浪費(fèi)，確保信息清晰與用戶效率。綜上，卡片設(shè)計(jì)在移動(dòng)端產(chǎn)品中扮演...
移動(dòng)端設(shè)計(jì)模式——常見(jiàn)的幾種導(dǎo)航形式
下面介紹移動(dòng)端幾種常見(jiàn)導(dǎo)航形式。一.標(biāo)簽式導(dǎo)航（也叫Tab導(dǎo)航）大多數(shù)app會(huì)選擇標(biāo)簽式導(dǎo)航，標(biāo)簽式導(dǎo)航結(jié)構(gòu)如下圖所示。底部標(biāo)簽導(dǎo)航是iOS頁(yè)面布局中比較推崇的一種導(dǎo)航方式。而頂部標(biāo)簽式導(dǎo)航是安卓常用的導(dǎo)航模式，它可以避免導(dǎo)航與底部虛擬按鈕之間發(fā)生沖突，引起誤操作。二.滾動(dòng)式標(biāo)簽式導(dǎo)航 前面介紹...
最最最常見(jiàn)的10種移動(dòng)端導(dǎo)航類(lèi)型,都?xì)w納再這兒了!
以下是十種常見(jiàn)移動(dòng)端導(dǎo)航類(lèi)型：選項(xiàng)卡式導(dǎo)航 這種流行的標(biāo)簽導(dǎo)航形式通常被稱為“方向舵導(dǎo)航”，因其樣式類(lèi)似船舶的方向舵，兩側(cè)都有其他操作按鈕。適合頁(yè)面內(nèi)容層次分明且需要頻繁操作的重要入口時(shí)使用。優(yōu)點(diǎn)是能夠突出顯示重要入口，易于發(fā)現(xiàn)和訪問(wèn)；操作性強(qiáng)，用戶可快速顯示特定選項(xiàng)的通知。缺點(diǎn)是受限于...
相關(guān)評(píng)說(shuō)：
霞山區(qū)漸開(kāi)： ______ 實(shí)現(xiàn)網(wǎng)頁(yè)布局的方式方法比較多,布局方式可以大概分為這幾類(lèi).布局種類(lèi):1、table布局(網(wǎng)頁(yè)的興起,1995)2、Flash布局(自由的黃金時(shí)代,1996)3、div+css(CSS的誕生,1998)4、柵格與響應(yīng)式(移動(dòng)端的興起,2007與2010) 當(dāng)前...
霞山區(qū)漸開(kāi)： ______ position display float clear width height margin padding
霞山區(qū)漸開(kāi)： ______ 首先還是講一下實(shí)現(xiàn)原理.在一個(gè)Activity的布局中需要有兩部分,一個(gè)是菜單(menu)的布局,一個(gè)是內(nèi)容(content)的布局.兩個(gè)布局橫向排列,菜單布局在左,內(nèi)容布局在右.初始化的時(shí)候?qū)⒉藛尾季窒蜃笃?以至于能夠完全隱藏,這樣內(nèi)容布局就會(huì)完全顯示在Activity中.然后通過(guò)監(jiān)聽(tīng)手指滑動(dòng)事件,來(lái)改變菜單布局的左偏移距離,從而控制菜單布局的顯示和隱藏.
霞山區(qū)漸開(kāi)： ______ 要做好移動(dòng)頁(yè)面設(shè)計(jì),首先要了解移動(dòng)端設(shè)計(jì)的難點(diǎn): 移動(dòng)端產(chǎn)品最難的地方就是在很小的屏幕上展示出所有的業(yè)務(wù).有了屏幕的限制,加上移動(dòng)端的客戶碎片化閱讀的習(xí)慣和高流失率.特別是電商類(lèi)移動(dòng)頁(yè)面,更難展示出來(lái).所以才有了像...
霞山區(qū)漸開(kāi)： ______ android 常用布局1、線性布局 LinearLayout:線性布局是所有布局中最常用的類(lèi)之一,也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls類(lèi)的父類(lèi).LinearLayout可以讓它的...
霞山區(qū)漸開(kāi)： ______ 要遵循的規(guī)則就是盡量保持整潔,不要顯得過(guò)于雜亂,由于亂糟糟網(wǎng)站會(huì)影響到客戶的注意力,在手機(jī)網(wǎng)站界面,在保持原有的風(fēng)格的基礎(chǔ)上,盡可能的布局合理.因?yàn)槭謾C(jī)網(wǎng)站客戶是由上往下看,因而在制作網(wǎng)站中應(yīng)該是重要的信息往前放,...
霞山區(qū)漸開(kāi)： ______ rem是相對(duì)于html的字體的大小的,如果html的fontSize:10px, 那么1rem就等于10px;所以說(shuō)整個(gè)頁(yè)面都用rem布局,如果當(dāng)屏幕大了,你只需要改html的fontSize是多少,整個(gè)頁(yè)面就可以跟著放大或者縮小了.一般寫(xiě)移動(dòng)端頁(yè)面都會(huì)根據(jù)寬度來(lái)...
霞山區(qū)漸開(kāi)： ______ 企業(yè)在移動(dòng)互聯(lián)網(wǎng)時(shí)代要實(shí)現(xiàn)成功轉(zhuǎn)型,要把握好這三個(gè)方面: 第一、要在思維上轉(zhuǎn)變:在移動(dòng)互聯(lián)網(wǎng)時(shí)代,企業(yè)首先要做的是關(guān)注前沿資訊和行業(yè)發(fā)展趨勢(shì),真正接受移動(dòng)信息化這一趨勢(shì),為轉(zhuǎn)型打下堅(jiān)實(shí)的基礎(chǔ); 第二、要提升管理水平:...
