正文

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

發(fā)布時間：2023-03-05 02:17:54 稿源：創(chuàng)意嶺閱讀： 1366 問大家

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

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

本文目錄:

1、如何進行app按鈕設(shè)計與排版
2、【柵格】系統(tǒng)科學地打造APP界面
3、十大APP界面框架設(shè)計
4、一個App 的界面設(shè)計流程是怎么產(chǎn)生的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1️⃣/單元格

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

2️⃣/外邊距

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

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

3️⃣/列和水槽

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

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

4️⃣/橫向間距

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

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

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

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

1️⃣/定義最小單元格

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

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

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

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

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

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

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

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

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

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

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

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

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

5️⃣/實際運用

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

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

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

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

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

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

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

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

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

✏️總結(jié)

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

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

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

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

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

2、舵式導航案例：微博

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

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

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

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

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

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

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