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

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

本文目錄:

• 1、如何進行app按鈕設計與排版

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

• 3、十大APP界面框架設計

• 4、一個App 的界面設計流程是怎么產生的

一、如何進行app按鈕設計與排版

第一個案例：社交類APP當中的按鈕設計。

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

第二個案例：電商APP當中的按鈕設計

這是國外一個非常不錯的賣兒童服裝的一款APP設計界面。25學堂給大家截圖的這2個界面是一個購物車的界面設計。希望大家可以好好的看下。

此款APP的按鈕設計非常的豐富。 各個元素基本都是由按鈕來組成和布局排版的。

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

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

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

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

😬為什么要學習網格系統(tǒng)？

1️⃣/提高團隊協(xié)作設計效率

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

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

2️⃣/更加理性的做設計

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

3️⃣/減少做決定的時間

很多設計師在處理頁面細節(jié)的時候，經常會為了一個更好的視覺效果 反復推敲 （說的就是好像就是我本人），甚至為了一個圖標到底應該使用20px好還是24px好而發(fā)愁，這樣十分影響設計效率。即便幾個頁面的設計都達到了自己滿意的視覺效果，也很有可能因為使用了不同的尺寸規(guī)則，而讓設計缺乏了統(tǒng)一性。

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

😮網格系統(tǒng)的基本構成要素

1️⃣/單元格

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

2️⃣/外邊距

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

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

3️⃣/列和水槽

頁面的內容區(qū)域由N個列和（N-1）個水槽組成。在 WEB端 設計中，N的數(shù)值一般會采用 12、16、24 ，但是在移動端設計中，列的數(shù)量不宜過多，因為手機屏幕寬度有限，列的數(shù)量越多，頁面就會被分割的越“碎”，在頁面設計時就會越難把控。通常使用6柵格

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

4️⃣/橫向間距

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

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

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

👉如何在APP設計中運用網格系統(tǒng)？

1️⃣/定義最小單元格

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

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

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

4px或6px單元格比較適合頁面內容信息較多 ，布局排版比較復雜的產品，例如淘寶、考拉等電商類APP；

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

2️⃣/確定組件間距的增量關系

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

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

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

我們在設計APP頁面時，用到的最多的布局方式就是等分布局，即頁面內容區(qū)域被N等分，每一份的寬度則根據(jù)屏幕寬度自適應調整。那么就從這個角度出發(fā)，思考一下頁面的網格應該設置為多少列，才能最大程度的滿足各種等分布局的需要。

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

4️⃣/Sketch布局設置

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

5️⃣/實際運用

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

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

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

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

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

2️⃣/網格不能被整除怎么辦？

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

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

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

✏️總結

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

原文鏈接   網易UEDC

三、十大APP界面框架設計

1、便簽導航   案例：微博 微信 淘寶 支付寶 手機百度 

                  特點 ：（3-5個標簽）可清楚當前入口位置 和個入口頻繁跳轉

2、舵式導航   案例 ：微博 

                    特點：他的樣式像輪船上用來指揮的船舵，兩側是其他操作按鈕

3、抽屜導航   案例：將菜單隱藏在當前頁面后，點擊入口即可像抽屜一樣拉出菜單

                   特點：節(jié)省頁面空間，聚焦當前頁面，擴展性好，但不適合頻繁切換

4、宮格導航   案例 ：美圖秀秀

                   特點：主要入口全部整合到頁面，讓用戶做出選擇

5、組合導航  案例：淘寶 京東

                  特點：布局靈活 適應框架的快速變化

6、列表導航    案例：微信朋友圈那面                  二三級頁面常見

                    特點：層次清晰 課展示內容較強的標簽

7、TAB導航     用于二級頁  應用于層次較多的情況 

                     特點：用于改變當前視圖 對當前頁面內容分類

8、輪播導航      案例：天氣類

                     特點：頁面簡潔 整體性強 不利于展示和查看

9、點聚導航：   主操作選項或導航合并為一個按鈕 浮動在頁面上

                     特點”頁面開闊 有趣 

10、瀑布導航： 案例：電商搜索頁面，社交圖片頁面  多用于圖片為主的內容

                      特點：下拉自動加載，容易產生疲勞感 網絡不好，產品體驗下降

四、一個App 的界面設計流程是怎么產生的

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

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

推薦閱讀：

校園推廣營銷策劃方案的設計

校園活動策劃方案范文(大學校園活動策劃方案)

校園引流推廣方法

廣州4a廣告公司名單(國內4a廣告公司有哪些)

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