創(chuàng)新互聯(lián)今天要分享的是《APP界面布局設(shè)計》，其中我們按照三大類給大家介紹，點、線、間距。

界面布局樣式是什么

界面布局樣式是指用于區(qū)分信息內(nèi)容，層次的板式設(shè)計的具體方式?？偨Y(jié)和了解目前常用的界面布局樣式，可以讓設(shè)計師快速決策，選擇合適的設(shè)計方式。

界面布局樣式有哪些

一.卡

利用「卡」設(shè)計界面，對應的是現(xiàn)在流行的「卡片式設(shè)計」，比如：APP Store 的 Today 頁面。

大海將從以下 3 點描述卡片設(shè)計的優(yōu)勢：

靈活性

信息區(qū)分

操作性和趣味性

靈活性

示例如下，分別是 Instagram，知乎，微博的首頁。

Instagram 的「推薦用戶」模塊，知乎的「知乎書店」模塊，微博的「問答」模塊，都利用了可以橫向滑動的卡片設(shè)計，打破了訂閱流信息垂直展示的限制，從而展示更多的信息。

信息區(qū)分—信息類型

示例如下，分別是天貓，嚴選，微信讀書的個人中心截圖。

這三個「個人中心」的設(shè)計，都利用卡片設(shè)計，對不同類型的信息進行了區(qū)分和歸整。

• 天貓：第一張卡片式用戶個人信息，以及用戶自己收藏的內(nèi)容和足跡數(shù)據(jù)；第二張卡片都是訂單數(shù)據(jù)；第三張卡片是運營卡片，用于專門的大型活動的內(nèi)容展示。
• 考拉：第一張卡片是用戶個人信息，以及用戶自己收藏的內(nèi)容和足跡數(shù)據(jù)；第二張卡片都是訂單數(shù)據(jù)；第三張卡片是用戶相關(guān)的其他信息；第四張卡片是卡拉提供的服務。
• 微信讀書：第一張卡片是用戶個人信息；第二張卡片是用戶賬戶的基本數(shù)據(jù)；第三張卡片是用戶自己生成的相關(guān)內(nèi)容。

信息區(qū)分—時間

示例如下，分別是 APP Store，微信公眾號，微博的截圖。

這三個設(shè)計，都把復雜的內(nèi)容信息，用卡片設(shè)計的形式，按照時間維度進行了整理和排序。

操作性和趣味性

示例如下，分別是支付寶，ZUO，探探的截圖。

卡片是一種模擬物理世界的設(shè)計形式，擁有可操作隱喻，可以被覆蓋、堆疊、移動、劃去。

支付寶卡包：模仿物理世界真實的銀行卡設(shè)計，利用用戶已有的銀行卡查看習慣，讓用戶快速理解和查看已綁定的銀行卡

ZUO：「ZUO」是一款小眾的，有趣新鮮創(chuàng)意的內(nèi)容分享產(chǎn)品。主打追尋更美好的可能，產(chǎn)品設(shè)計別具特色。左滑卡片可以切換內(nèi)容的設(shè)計，讓產(chǎn)品體驗更加靈動有趣。

探探：一款陌生人社交軟件，廣告主打：左滑不喜歡，右滑喜歡的體驗，凸顯自己在同類型軟件中的體驗差異化，用戶的感受更加新鮮有趣。

卡片設(shè)計的反例

自從 iOS 11 之后，卡片設(shè)計的趨勢就被推向了高潮。設(shè)計網(wǎng)站上有很多卡片式設(shè)計作品出現(xiàn)。卡片設(shè)計經(jīng)常會呈現(xiàn)出比較好的視覺效果，但是卡片設(shè)計用的不好，會導致浪費空間，降低效率。

示例如下：是大海從 dribbble 上找來的設(shè)計，通訊錄的設(shè)計利用了卡片設(shè)計。當用戶需要尋找聯(lián)系人時，呈「Z字型」閱讀曲線，遠沒有微信通訊錄的「直線型」閱讀效率高。

二.線

「線」指的是 APP 設(shè)計中最常見的「分割線」，在分割線當中可以分為兩類：

貫穿式

「貫穿式」是指，線長度貫穿屏幕，左右邊距為零。貫穿式分割線可以讓被分割的信息的獨立性變強。

示例如下：分別是豆瓣的首頁，網(wǎng)易云音樂的動態(tài)截圖。

兩者的共同點是，每一塊信息的內(nèi)容較多，關(guān)聯(lián)性弱。需要用貫穿式分割性，讓每一個信息內(nèi)容，更加獨立。

內(nèi)嵌式

「內(nèi)嵌式」是指，線的左右邊距留有空隙。內(nèi)嵌式分割線，可以有助于信息閱讀的流暢性。

示例如下：分別是 APP Store 今日主題的列表頁，36Kr 的個人中心頁面。

貫穿式和內(nèi)嵌式經(jīng)常是同時使用的，如下圖：網(wǎng)易嚴選的填寫訂單頁面

圖中列表「商品合計」「運費」是相對關(guān)聯(lián)性較強的，因此這兩者之間用了內(nèi)嵌式分割線。「我要開發(fā)票」和它們之間是相對獨立的，因此使用貫穿式分割線。

分割線設(shè)計的反例

分割線設(shè)計是界面當中最常用的元素，大?？戳诉@么多APP，截了這么多圖，都沒有發(fā)現(xiàn)界面中一根線都沒有使用的產(chǎn)品。

分割線設(shè)計要注意是否應該使用，以及使用時線的顏色，粗細。

下圖中：知乎的「個人中心」，來源于網(wǎng)絡的日歷設(shè)計。

知乎：線的顏色用的過重，導致當看到這個頁面時，會感受到滿眼都是線。改進方法有兩種：把線改細，改淡;把列表文字改重。總結(jié)下來就是拉開文字和線的對比。

日歷：日期本身的排版已經(jīng)把信息區(qū)分的比較明顯，此時不需要使用分割線。假設(shè) 「親密」 「對比」 「重復」 足以讓信息得到區(qū)分，不使用分割線，可以讓你的設(shè)計，更加透氣簡潔。

三.間距

利用「間距」設(shè)計界面，對應的是現(xiàn)在流行的「無框設(shè)計」，不用分割線，純粹用間距實現(xiàn)信息的排版。

大海將從以下 2 點描述其適用性：

圖片為主

內(nèi)容少且有規(guī)律

圖片為主

示例如下：分別是 Instagram，愛彼迎，紅板報的界面截圖。這些頁面中，均以圖片為主。圖片本身的邊緣具備分隔作用。

內(nèi)容少且有規(guī)律

示例 1：愛彼迎的「故事頁面」和「搜索結(jié)果頁」，兩者都只有 2 中信息板式。內(nèi)容少且有規(guī)律。

示例 2：輕芒的「分類頁」和「類別首頁」，分類頁只有一種板式，并橫向排版展示。類別首頁只有一屏信息。

總結(jié)

卡，線，間距都是頁面當中基礎(chǔ)元素，希望本篇文章可以幫助設(shè)計師掌握和了解這 3 個基礎(chǔ)元素的適用性。在APP界面設(shè)計執(zhí)行中，更加風馳電掣，如沐春風。

綜上所述，是上海網(wǎng)站建設(shè)公司——創(chuàng)新互聯(lián)為大家分享的《APP界面布局設(shè)計》，同時創(chuàng)新互聯(lián)提供APP開發(fā)服務，有需求直接在線聯(lián)系創(chuàng)新互聯(lián)客服。

分享題目：APP界面布局設(shè)計
網(wǎng)站網(wǎng)址：http://aaarwkj.com/news0/163550.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、手機網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信小程序、全網(wǎng)營銷推廣、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)