校園app界面設(shè)計(jì)（校園app界面設(shè)計(jì)圖片）

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于校園app界面設(shè)計(jì)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)：175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、如何進(jìn)行app按鈕設(shè)計(jì)與排版

• 2、【柵格】系統(tǒng)科學(xué)地打造APP界面

• 3、十大APP界面框架設(shè)計(jì)

• 4、一個(gè)App 的界面設(shè)計(jì)流程是怎么產(chǎn)生的

一、如何進(jìn)行app按鈕設(shè)計(jì)與排版

第一個(gè)案例：社交類(lèi)APP當(dāng)中的按鈕設(shè)計(jì)。

以上這個(gè)APP界面，最醒目的地方就是 漂亮的按鈕。這樣的APP按鈕是直接吸引用戶(hù)點(diǎn)擊交互的。而且按鈕的排版和整個(gè)元素的排版都是居中的，屬于UI設(shè)計(jì)當(dāng)中的中軸式布局。大氣穩(wěn)重。

第二個(gè)案例：電商APP當(dāng)中的按鈕設(shè)計(jì)

這是國(guó)外一個(gè)非常不錯(cuò)的賣(mài)兒童服裝的一款A(yù)PP設(shè)計(jì)界面。25學(xué)堂給大家截圖的這2個(gè)界面是一個(gè)購(gòu)物車(chē)的界面設(shè)計(jì)。希望大家可以好好的看下。

此款A(yù)PP的按鈕設(shè)計(jì)非常的豐富。 各個(gè)元素基本都是由按鈕來(lái)組成和布局排版的。

二、【柵格】系統(tǒng)科學(xué)地打造APP界面

UI設(shè)計(jì)師設(shè)計(jì)一款A(yù)PP的時(shí)候，最先要制定一套完善可行的設(shè)計(jì)規(guī)范，其中包含定義顏色、文字、圖標(biāo)、結(jié)構(gòu)、布局、間距等要素。但是很多設(shè)計(jì)師往往會(huì)忽視一個(gè)重要的東西，那就是網(wǎng)格系統(tǒng)的構(gòu)建。網(wǎng)格系統(tǒng)可以說(shuō)是整個(gè)頁(yè)面的骨架，它將頁(yè)面中所有的設(shè)計(jì)元素高效有序地組織起來(lái)，從而讓整個(gè)APP的設(shè)計(jì)具有 高度的一致性 和 規(guī)律性 ，提高設(shè)計(jì)師工作效率，避免憑感覺(jué)做設(shè)計(jì)。

🙄什么是網(wǎng)格系統(tǒng)？

網(wǎng)格系統(tǒng)是利用一系列垂直和水平的參考線(xiàn)，將頁(yè)面分割成若干個(gè)有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，控制頁(yè)面元素之間的對(duì)齊和比例關(guān)系，從而搭建出一個(gè)具有高度秩序性的頁(yè)面框架。例如谷歌的 Material Design 中，將整個(gè)頁(yè)面看做是一個(gè)網(wǎng)格，所有頁(yè)面元素都與網(wǎng)格線(xiàn)對(duì)齊，并且將這一規(guī)則貫穿于整個(gè)產(chǎn)品的設(shè)計(jì)中。

😬為什么要學(xué)習(xí)網(wǎng)格系統(tǒng)？

1️⃣/提高團(tuán)隊(duì)協(xié)作設(shè)計(jì)效率

當(dāng)多名設(shè)計(jì)師共同設(shè)計(jì)一款A(yù)PP的時(shí)候，網(wǎng)格系統(tǒng)就變得尤為重要。每個(gè)設(shè)計(jì)師都有一套自己的設(shè)計(jì)方法和習(xí)慣，如果沒(méi)有一個(gè)統(tǒng)一的框架去約束的話(huà)，有可能在設(shè)計(jì)類(lèi)似的組件或頁(yè)面時(shí)，給出不同的設(shè)計(jì)方法和尺寸，這樣的話(huà)整個(gè)APP內(nèi)的頁(yè)面都會(huì)比較混亂。例如下圖，設(shè)計(jì)師A和B都各自遵循一套尺寸規(guī)范去搭建頁(yè)面，但是設(shè)計(jì)結(jié)果給人的感覺(jué)卻完全不一樣。

因此，擁有一套 統(tǒng)一的網(wǎng)格系統(tǒng) ，就能保證設(shè)計(jì)師們的產(chǎn)出具有高度的 一致性 、 規(guī)律性 ， 合作 起來(lái)更加地 高效 。

2️⃣/更加理性的做設(shè)計(jì)

UI設(shè)計(jì)是需要理性的、客觀的、具有數(shù)學(xué)邏輯美感的。熟練運(yùn)用網(wǎng)格系統(tǒng)能夠讓你的設(shè)計(jì) 更有秩序 和 節(jié)奏感 ，頁(yè)面信息的展現(xiàn) 更加清晰 ， 提高閱讀效率 ，從而提供給用戶(hù)舒適的使用體驗(yàn)。

3️⃣/減少做決定的時(shí)間

很多設(shè)計(jì)師在處理頁(yè)面細(xì)節(jié)的時(shí)候，經(jīng)常會(huì)為了一個(gè)更好的視覺(jué)效果 反復(fù)推敲 （說(shuō)的就是好像就是我本人），甚至為了一個(gè)圖標(biāo)到底應(yīng)該使用20px好還是24px好而發(fā)愁，這樣十分影響設(shè)計(jì)效率。即便幾個(gè)頁(yè)面的設(shè)計(jì)都達(dá)到了自己滿(mǎn)意的視覺(jué)效果，也很有可能因?yàn)槭褂昧瞬煌某叽缫?guī)則，而讓設(shè)計(jì)缺乏了統(tǒng)一性。

制定完善的網(wǎng)格系統(tǒng)，能讓設(shè)計(jì)師在頁(yè)面布局和細(xì)節(jié)處理上更明確、自信、高效，一切設(shè)計(jì)行為都是有據(jù)可循的，減少因?yàn)橐恍┘?xì)節(jié)推敲而造成的不必要的時(shí)間成本，拒絕拍腦袋做設(shè)計(jì)。

😮網(wǎng)格系統(tǒng)的基本構(gòu)成要素

1️⃣/單元格

網(wǎng)格系統(tǒng)里面最基本的元素“單元格”

2️⃣/外邊距

在APP頁(yè)面中，所有內(nèi)容都會(huì)顯示在中間的內(nèi)容區(qū)域里，那么內(nèi)容區(qū)域與屏幕的 左右兩端所留出的空間 ，就被稱(chēng)為外邊距。

外邊距數(shù)值越大，頁(yè)面顯得越寬松，數(shù)值越小越顯得比較“滿(mǎn)”，因此需要根據(jù)自己實(shí)際的情況去確定具體數(shù)值。例如Airbnb的產(chǎn)品調(diào)性就是簡(jiǎn)約大氣，整體布局比較寬松，因此在外邊距的數(shù)值上選擇的是48px。再例如網(wǎng)易云音樂(lè)，頁(yè)面中以專(zhuān)輯、歌單等的封面為主，側(cè)重于表現(xiàn)圖片的視覺(jué)沖擊力，因此頁(yè)面內(nèi)容區(qū)域比例會(huì)比較大，外邊距的數(shù)值選擇了32px。

3️⃣/列和水槽

頁(yè)面的內(nèi)容區(qū)域由N個(gè)列和（N-1）個(gè)水槽組成。在 WEB端 設(shè)計(jì)中，N的數(shù)值一般會(huì)采用 12、16、24 ，但是在移動(dòng)端設(shè)計(jì)中，列的數(shù)量不宜過(guò)多，因?yàn)槭謾C(jī)屏幕寬度有限，列的數(shù)量越多，頁(yè)面就會(huì)被分割的越“碎”，在頁(yè)面設(shè)計(jì)時(shí)就會(huì)越難把控。通常使用6柵格

水槽寬度數(shù)值對(duì)頁(yè)面的影響，與外邊距大體類(lèi)似，即數(shù)值越大頁(yè)面越寬松，反之亦然。例如Airbnb選擇的是24px，而網(wǎng)易云音樂(lè)則是16px。

4️⃣/橫向間距

在雜志的設(shè)計(jì)排版中，會(huì)經(jīng)常使用到基線(xiàn)系統(tǒng)，即水平方向會(huì)分布著一條條間距相同的參考線(xiàn)，用以規(guī)范文字和圖片在水平方向的節(jié)奏關(guān)系。然而平面排版中尺寸相對(duì)固定，移動(dòng)端的屏幕寬度和元素組件高度確都具有不確定性，因此這套基線(xiàn)系統(tǒng)不能直接照搬過(guò)來(lái)，需要視情況使用。

在文本段落中，橫向間距就可以使用基線(xiàn)系統(tǒng)，用以規(guī)范水平方向上文字的節(jié)奏關(guān)系，這種情況多出現(xiàn)于閱讀類(lèi)產(chǎn)品的正文頁(yè)?；€(xiàn)的間距數(shù)值，則根據(jù)自身產(chǎn)品實(shí)際情況而定。例如下圖中基線(xiàn)的間距設(shè)定為4px，則字號(hào)和行間距均使用4px的整數(shù)倍，因此每一行字都會(huì)準(zhǔn)確壓在基線(xiàn)上，保證了視覺(jué)節(jié)奏的一致性。

而組件與組件之間的橫向間距，就和縱向間距的使用規(guī)律保持一致，即選用最小單元格整數(shù)倍的一系列數(shù)值，來(lái)規(guī)范組件在水平方向上的節(jié)奏關(guān)系。例如下 圖中的最小單元格設(shè)置為8px ，那么橫向間距的數(shù)值就會(huì)選用 8px 、 16px 、 24px 、 32px 等。（ 劃重點(diǎn) ）

👉如何在APP設(shè)計(jì)中運(yùn)用網(wǎng)格系統(tǒng)？

1️⃣/定義最小單元格

最小單元格的數(shù)值，大多數(shù)APP會(huì)選擇 4-10 這個(gè)范圍內(nèi)一個(gè) 偶數(shù) 。那么選用哪個(gè)值最為合適呢？

這需要從兩方面考慮，一方面是該數(shù)值是否能被大多數(shù)手機(jī)屏幕的寬度整除，即 廣泛的適用性 ，另一方面是在具體使用時(shí)是否具有 一定的靈活性 。在適用性方面，4、6、8、10這四個(gè)數(shù)值都是基本可以滿(mǎn)足的，在靈活性方面，4px表現(xiàn)最佳，但是頁(yè)面就會(huì)被分割的非常細(xì)碎，在設(shè)計(jì)時(shí)比較難于把控。

因此我們需要根據(jù)APP的實(shí)際情況選擇合適的數(shù)值，

4px或6px單元格比較適合頁(yè)面內(nèi)容信息較多 ，布局排版比較復(fù)雜的產(chǎn)品，例如淘寶、考拉等電商類(lèi)APP；

8px單元格 對(duì)一般的設(shè)計(jì)場(chǎng)景都可以很好的滿(mǎn)足，比較適合大多數(shù)的APP產(chǎn)品，因此是比較推薦使用的。

2️⃣/確定組件間距的增量關(guān)系

既然確定了最小單元格的數(shù)值，那么頁(yè)面里所有的間距（包括水槽、外邊距、橫向間距等）、組件尺寸等都需要是最小單位的整數(shù)倍，以達(dá)到統(tǒng)一視覺(jué)節(jié)奏的目的。

例如單元格選擇為8px，那么所有用到的間距尺寸將會(huì)是 8px 、 16px 、 24px 、 32px 、 40px ……( 知識(shí)點(diǎn) )

3️⃣/確定列的數(shù)量

我們?cè)谠O(shè)計(jì)APP頁(yè)面時(shí)，用到的最多的布局方式就是等分布局，即頁(yè)面內(nèi)容區(qū)域被N等分，每一份的寬度則根據(jù)屏幕寬度自適應(yīng)調(diào)整。那么就從這個(gè)角度出發(fā)，思考一下頁(yè)面的網(wǎng)格應(yīng)該設(shè)置為多少列，才能最大程度的滿(mǎn)足各種等分布局的需要。

以下列舉了幾種典型情況（4列、10列、16列等大家有興趣的話(huà)可以自己嘗試一下，這里就不一一列舉了），我們發(fā)現(xiàn)12列和24列除了5等分外，其他情況都可以滿(mǎn)足，6列相對(duì)稍微差了一點(diǎn)，即結(jié)果為：12列=24列>6列>8列。不過(guò)其中24列顯然將有限的手機(jī)屏幕分割的太碎了，因此在實(shí)際使用中還是以 12列和6列 為主。

4️⃣/Sketch布局設(shè)置

sketch自帶布局設(shè)置功能，即可快速搭建出網(wǎng)格系統(tǒng)的參考布局，在平時(shí)做設(shè)計(jì)的過(guò)程中，可以經(jīng)常使用⌃+L快捷鍵切換布局的顯示（知識(shí)點(diǎn)：1、總寬=屏幕總寬度-外邊距x2；2、偏移=外邊距；3、“裝訂線(xiàn)在外部”不要勾選。）

5️⃣/實(shí)際運(yùn)用

在首頁(yè)設(shè)計(jì)的初期，還沒(méi)有運(yùn)用完整的網(wǎng)格系統(tǒng)進(jìn)行規(guī)范，組件之間的間距規(guī)律基本以10px、20px、30px為主，各個(gè)布局模塊之間沒(méi)有形成內(nèi)在關(guān)聯(lián)的位置關(guān)系，視覺(jué)的節(jié)奏感不流暢，樣式不統(tǒng)一。下面兩個(gè)頁(yè)面中，大部分元素都沒(méi)有與網(wǎng)格貼合，布局無(wú)規(guī)律，沒(méi)有一個(gè)客觀的參考。

現(xiàn)在我們開(kāi)始統(tǒng)一使用 8px、12列 網(wǎng)格系統(tǒng)，對(duì)首頁(yè)進(jìn)行一次布局優(yōu)化。在下面三張圖中我們看到，無(wú)論是頂部圖標(biāo)、入口圖標(biāo)、豎版封面還是橫版封面，都由網(wǎng)格系統(tǒng)整體串聯(lián)起來(lái)了，不再是凌亂獨(dú)立的個(gè)體，閱讀起來(lái)更順暢。橫向的間距也都開(kāi)始使用 8px的整數(shù)倍 ，給用戶(hù)帶來(lái)更有節(jié)奏的瀏覽體驗(yàn)。

🤕網(wǎng)格系統(tǒng)在使用中需要注意哪些問(wèn)題？

1️⃣/ 網(wǎng)格系統(tǒng)不要生搬硬套

并不是每個(gè)元素都必須要與網(wǎng)格對(duì)齊的，要根據(jù)自己的實(shí)際需要而定，如果硬套進(jìn)去的話(huà)，頁(yè)面就會(huì)顯得很怪異。圖中左面的頁(yè)面的三個(gè)tab標(biāo)題想要在網(wǎng)格上與封面對(duì)齊，但是標(biāo)題之間距離太大，看起來(lái)很不舒服。這里三個(gè)tab標(biāo)題的間距是固定值，不需要根據(jù)屏幕寬度去適配，因此要把三個(gè)tab標(biāo)題看做是一個(gè)整體，即一個(gè)tab組件，組件左端與網(wǎng)格貼合即可。

2️⃣/網(wǎng)格不能被整除怎么辦？

在做設(shè)計(jì)稿的時(shí)候，最常用的畫(huà)布尺寸也許就是iPhone6/7/8的750*1334px了，我們會(huì)發(fā)現(xiàn)，在這個(gè)尺寸下如果以8px為最小單元格時(shí)，畫(huà)布是無(wú)法被整除的，即750px寬度下除去所有外邊距和水槽后，每一個(gè)紅色的列寬實(shí)際為42.5px。那么就會(huì)產(chǎn)生疑問(wèn)：這樣的話(huà)，網(wǎng)格系統(tǒng)是不是就意味著不能用了？

其實(shí)這屬于正?，F(xiàn)象，因?yàn)闆](méi)有哪一套網(wǎng)格系統(tǒng)，在任何屏幕分辨率下都能完美整除的。并且同樣是8px單元格，在750px手機(jī)上無(wú)法被整除，而在720px手機(jī)上就完全沒(méi)有問(wèn)題。

例如下圖的尺寸中，代表外邊距和水槽的藍(lán)色數(shù)值，是我們需要提供給開(kāi)發(fā)的固定值，而紅色的數(shù)值是根據(jù)屏幕實(shí)際寬度計(jì)算得來(lái)的。因此我們只需要保證提供給開(kāi)發(fā)的數(shù)值遵循網(wǎng)格系統(tǒng)規(guī)律即可，至于頁(yè)面中計(jì)算得來(lái)的數(shù)值，那0.5px的偏差肉眼是感覺(jué)不出來(lái)的。

✏️總結(jié)

網(wǎng)格系統(tǒng)是視覺(jué)設(shè)計(jì)師強(qiáng)有力的輔助工具，它能指導(dǎo)我們用更科學(xué)的方式打造APP界面，從而讓頁(yè)面布局規(guī)范有序、節(jié)奏統(tǒng)一，讓設(shè)計(jì)師效率翻倍。然而正如文中所說(shuō)，網(wǎng)格參數(shù)種類(lèi)繁多，因此需要根據(jù)自身需要，構(gòu)建一個(gè)適合自己、符合產(chǎn)品調(diào)性的網(wǎng)格系統(tǒng)。

原文鏈接   網(wǎng)易UEDC

三、十大APP界面框架設(shè)計(jì)

1、便簽導(dǎo)航   案例：微博 微信 淘寶 支付寶 手機(jī)百度 

                  特點(diǎn) ：（3-5個(gè)標(biāo)簽）可清楚當(dāng)前入口位置 和個(gè)入口頻繁跳轉(zhuǎn)

2、舵式導(dǎo)航   案例 ：微博 

                    特點(diǎn)：他的樣式像輪船上用來(lái)指揮的船舵，兩側(cè)是其他操作按鈕

3、抽屜導(dǎo)航   案例：將菜單隱藏在當(dāng)前頁(yè)面后，點(diǎn)擊入口即可像抽屜一樣拉出菜單

                   特點(diǎn)：節(jié)省頁(yè)面空間，聚焦當(dāng)前頁(yè)面，擴(kuò)展性好，但不適合頻繁切換

4、宮格導(dǎo)航   案例 ：美圖秀秀

                   特點(diǎn)：主要入口全部整合到頁(yè)面，讓用戶(hù)做出選擇

5、組合導(dǎo)航  案例：淘寶 京東

                  特點(diǎn)：布局靈活 適應(yīng)框架的快速變化

6、列表導(dǎo)航    案例：微信朋友圈那面                  二三級(jí)頁(yè)面常見(jiàn)

                    特點(diǎn)：層次清晰 課展示內(nèi)容較強(qiáng)的標(biāo)簽

7、TAB導(dǎo)航     用于二級(jí)頁(yè)  應(yīng)用于層次較多的情況 

                     特點(diǎn)：用于改變當(dāng)前視圖 對(duì)當(dāng)前頁(yè)面內(nèi)容分類(lèi)

8、輪播導(dǎo)航      案例：天氣類(lèi)

                     特點(diǎn)：頁(yè)面簡(jiǎn)潔 整體性強(qiáng) 不利于展示和查看

9、點(diǎn)聚導(dǎo)航：   主操作選項(xiàng)或?qū)Ш胶喜橐粋€(gè)按鈕 浮動(dòng)在頁(yè)面上

                     特點(diǎn)”頁(yè)面開(kāi)闊 有趣 

10、瀑布導(dǎo)航： 案例：電商搜索頁(yè)面，社交圖片頁(yè)面  多用于圖片為主的內(nèi)容

                      特點(diǎn)：下拉自動(dòng)加載，容易產(chǎn)生疲勞感 網(wǎng)絡(luò)不好，產(chǎn)品體驗(yàn)下降

四、一個(gè)App 的界面設(shè)計(jì)流程是怎么產(chǎn)生的

[商侶軟件]app開(kāi)發(fā)平臺(tái)指出，一個(gè)手機(jī)app的接口設(shè)計(jì)流程，一般都是先有原型策劃，確認(rèn)好原型之后，UI界面設(shè)計(jì)就根據(jù)原型的框架來(lái)設(shè)計(jì)，并且進(jìn)行優(yōu)化處理。

以上就是關(guān)于校園app界面設(shè)計(jì)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

校園推廣營(yíng)銷(xiāo)策劃方案的設(shè)計(jì)

校園活動(dòng)策劃方案范文(大學(xué)校園活動(dòng)策劃方案)

校園引流推廣方法

廣州4a廣告公司名單(國(guó)內(nèi)4a廣告公司有哪些)

戰(zhàn)略咨詢(xún)公司(戰(zhàn)略咨詢(xún)公司排名前十)