正文

App界面設計（app界面設計用什么軟件）

發(fā)布時間：2023-04-27 20:27:43 稿源：創(chuàng)意嶺閱讀： 685

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

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務客戶遍布全國，設計相關業(yè)務請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、策劃007-App界面交互設計規(guī)范
2、app界面設計尺寸規(guī)范大全
3、你手機里哪些APP界面使用了APP宮格設計
4、APP界面設計中的字體設計原則

App界面設計（app界面設計用什么軟件）

一、策劃007-App界面交互設計規(guī)范

在上篇《策劃006-APP界面設計風格》確定下來后，產(chǎn)品經(jīng)理（兼交互設計）還不用著急將所有的交互稿扔給設計師進行細致的界面設計。在細節(jié)設計啟動前，拉上設計師和安卓前端開發(fā)、ios前端開發(fā)一起商議確定設計規(guī)范先吧！

APP設計規(guī)范指對APP界面進行風格統(tǒng)一，對界面元素的樣式、顏色和大小設定統(tǒng)一的規(guī)范和使用原則。與設計、前端約定好統(tǒng)一的設計規(guī)范很重要，約定設計規(guī)范可以減少產(chǎn)品、設計、前端的溝通成本；可以使界面設計整潔、統(tǒng)一，減少界面元素的重復設計；可以減少設計素材，控制安裝包的大小。

APP設計規(guī)范主要包括對界面布局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標、按鈕常態(tài)點擊態(tài)等進行統(tǒng)一的梳理和規(guī)范。

頁面布局和交互規(guī)范上建議安卓、ios盡量統(tǒng)一，這樣可以避免安卓和ios分別設計一套稿子。當然土豪公司可以忽略這個建議，安卓和ios分別做專門的設計當然更好。在中小型項目來看，設計資源緊張的話可以考慮安卓和ios用同一個稿子，分別做相應的微調(diào)后輸出適用安卓和ios不同的尺寸要求就可以。

推薦使用mac矢量設計工具"sketch"。以ios平臺的iPhone5的尺寸640*1136px作為標準尺寸設計。在界面設計完成后可以做相應的微調(diào)導出適用ios和安卓尺寸的稿子。這里可以首先統(tǒng)一設計稿輸出規(guī)范：

安卓（720*1280px）：界面預覽圖、界面坐標圖、標準界面的圖標png文件

IOS（640*1136px）：界面預覽圖、界面坐標圖、1-3倍圖矢量圖標pdf文件

PS：界面坐標圖指在設計已定稿的界面預覽圖上標注：界面元素的間距、文字的顏色、文字的字號大小、圖標的尺寸、按鈕不同狀態(tài)顏色、按鈕的尺寸等等

標準色規(guī)范：重要、一般、弱。標準色重要：重要顏色中一般不超過3種，這里的例子重要顏色之一紅色需要小面積使用,用于特別需要強調(diào)和突出的文字、按鈕和icon；而黑色用于重要級文字信息比如標題、正文等。標準色一般：都是相近的顏色，而且要比重要顏色弱，普遍用于普通級信息、引導詞比如提示性文案或者次要的文字信息。標準色較弱：普遍用于背景色和不需要顯眼的邊角信息。

文字是APP主要信息的表現(xiàn)，尤其新聞閱讀、社區(qū)APP等制定標準的設計規(guī)范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。標準字規(guī)范重要、一般、弱。這里主要規(guī)范標準字的大小，標準字要注意跟上文的標準色進行組合突出APP重要的信息和弱化次要的信息。標準字重要：大字號普遍用于大標題、top導航，較小字號用在分割模塊的標題上。標準字一般：主要用在大多數(shù)文字，比如正文。標準字弱：普遍與標準色較弱組合用于輔助性文字如一些次要的文案說明。

APP界面要給人簡潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設計。這里間距設計還要注意考慮適配不同的屏幕分辨率。一般解決方案有據(jù)屏幕等比放大縮小間距，或者固定某些界面元素的間距，讓其他空間留空拉伸。為了滿足屏幕分辨率較大的設備，有時甚至需要改變APP界面的頁面布局。

五、彈層規(guī)范

彈層規(guī)范要注意分別設計安卓和ios的彈層，比如ios大多操作彈層由底部彈出，而安卓直接顯示操作再頁面中央，這樣的交互搞作應該遵循各自平臺的設計要求。彈層需求根據(jù)不同的功用設計不同的樣式。比如操作性彈層-右上角更多按鈕觸發(fā)；提示性彈層：弱提示性的應用系統(tǒng)的token飄字提示即可；需要強提示可以使用取消、確定的模塊彈層；更強提示而且彈層需要承載一定操作的使用強引導彈層，右上角提供關閉操作或者可以點擊非彈層區(qū)域關閉彈層。

頁面loading動畫是APP界面必不可少的元素，增加loading可以給用戶明確的反饋功能正在加載，減少用戶在等待功能響應引起的煩躁感。另外loading動畫除了常規(guī)的菊花還可以考慮使用npc，讓APP更生動、活潑；或者使用logo口號加強APP的品牌形象。

圖標規(guī)范要注意安卓和ios平臺需求不同的大小和不同的文件格式：如安卓需要720*1280px標準頁面的png圖標格式；ios需要3個尺寸320*（1-3）倍圖的圖標pdf文件。圖標還應該根據(jù)不同的功能需求設計不同的狀態(tài)：如常態(tài)、選中態(tài)、點擊態(tài)等。

按鈕規(guī)范按狀態(tài)分有：常態(tài)、點擊態(tài)、不可點擊態(tài)。按鈕規(guī)范因不同功能和場景需要，設計不同的樣式和顏色，在尺寸上也分有：長、中、短；而且按不同手機平臺長中短尺寸也注意有所不同。

頁面加載失敗、頁面為空可以統(tǒng)一規(guī)范為NPC、文案、按鈕。要注意根據(jù)不同的場景顯示不同的NPC和文案。

......

...

設計規(guī)范主要由設計童鞋來梳理，但必須要與前端開發(fā)、產(chǎn)品經(jīng)理達成共識，嚴格遵守約定的規(guī)范，否則這個設計規(guī)范就毫無意義了。在制定設計規(guī)范過程中，產(chǎn)品經(jīng)理要積極主動充當橋梁角色組織設計師、前端開發(fā)一起制定設計規(guī)范，保證設計規(guī)范考慮的更切合實際、更全面、更完整。

二、app界面設計尺寸規(guī)范大全

原型設計尺寸

☆ 狀態(tài)欄(status bar)：就是電量條，其高度為：20px；

☆ 導航欄(navigation)：就是頂部導航，有線其高度為：45px；沒有線高度就是44px；

☆ 主菜單欄(submenu，tab)：就是標簽欄，底部導航，其高度為：46px；

☆ 信號格：5 * 5

☆ wifi 圖片：11 * 9

☆ 鎖：11 * 11

☆ 導航：8 * 8

☆ 電量：22 * 9

☆ 閃電：5 * 8

☆ 狀態(tài)欄中的文字：10px

☆ 頂部導航欄的圖標尺寸為16x16px左右，底部標簽欄的圖標尺寸為23 x 23px左右。

☆ 導航欄的文字大小最大值是14px，底部標簽欄的圖標下方的文字大小為10px。

☆ 內(nèi)容區(qū)域的文字大小是：10px, 12px，14px，16px。

① 文字黑色：#282828

② 文字深灰色：#656565

③ 文字淺灰色：#989898

④ 邊框淺灰色：#C3C3C3

⑤ 背景淡灰色：#f2f2f2

⑥ 按鈕背景純白色：#ffffff

A、疏遠距離：比如，所有元素距離手機屏幕最左邊的距離。

B、親密距離：比如，左邊圖標與右邊文字之間的距離。

1、iPhone6手機模型尺寸：429x881px

2、界面尺寸布局：滿屏尺寸375x667px

3、高度電量條高度20px，導航欄高度44px，標簽欄高度46px；

4、各區(qū)域圖標大小導航欄圖標16px，底部標簽欄圖標23px；

5、各區(qū)域文字大小電量條-文字10px，導航欄-文字14px，標簽欄-文字10px；

6、常用的文字大小：16px，14px，12px，10px；

7、常用的顏色：背景淺灰色：#f2f2f2, 文字深黑色： #323232，邊框色深灰：#CCCCCC；

8、常用可點擊區(qū)域的高度（比如搜索區(qū)域）：28px；

9、單行文字的背景框的高度：44px，雙行則為：88px，三行則為：132px；

10、常用間距：親密距離：10px；疏遠距離：15px，其它距離：5px，22px等；

三、你手機里哪些APP界面使用了APP宮格設計

看到這樣的APP設計標題，你腦海當中有沒有回憶幾個印象比較深刻的APP界面設計呢？

是采用宮格布局設計的，比如什么九宮格、六宮格、四宮格、八宮格等等。如下圖：支付寶的首頁就是采用了APP宮格設計。

第一部分：APP的首頁肯定是APP宮格設計泛濫的地方。也是我們最常見的宮格設計的地方。

比如下面的這些APP界面設計：途牛旅游APP首頁設計

為什么大家喜歡采用APP宮格界面設計，或者宮格布局，主要是原因在于，這樣的界面設計簡單明了、而且也符合APP導航入口等要求。

第二部分常見的APP界面是頻道頁或者欄目界面；比如優(yōu)酷的頻道頁

第三個地方就是篩選界面：

第四部分：我的頁面或者相關的界面

四、APP界面設計中的字體設計原則

設計文字時應保證文字辨識度高和信息傳達的準確性。相對于圖片文字擁有更加清晰準確的表達能力，使得用戶能更加清晰從APP中獲取信息信息，界面內(nèi)容也更加直觀。文字設計要遵循以下原則：

用語要簡潔，信息內(nèi)容清楚，避免使用專業(yè)的語言，同時減少不必要的修飾詞語，使得用戶可以更加迅速的理解手機APP的功能，文字布局上也應做到排版布局合理，結構層次清晰。

1. 親近感與柔和感

尖銳的物體會給人帶來危險的感覺，文字也有同樣的心理作用，想要文字給人帶來溫柔的感覺，首先應使用線條粗一些、前端渾圓的字體，最好是手寫體;其次避免使用黑色或藏藍色的文字，應選取與背景顏色亮度差異較小的暖色。

2. 未來性與先進性

應選擇裝飾性弱的無襯線體和黑體，或者利用圖形組成具有“圖形化”的文字，需要注意的是，越是抽象的字識別性越低，這種字可以用在logo上，注意小范圍使用。顏色則可以考慮黑白灰這些簡單的配色。

3. 纖細與美麗

女性化的文字通常給人優(yōu)美、纖細的印象，需要選用線條細且有曲線的字體，流暢的手寫細線體可以運用在女性產(chǎn)品上，更能給人帶來嬌媚的視覺效果。

4. 懷舊與復古

字體的設計具有流行性，所以字體的設計通?？梢苑从吵隽餍械内厔?。在字體設計時要選用與背景顏色差異大的色彩，比如黑色的粗字體配上明亮的背景色，視覺的沖擊力在哪里運用都不會減弱。

字體設計的節(jié)奏感體現(xiàn)在字號對比、重量對比、色彩對比上。當字號越大時，文字就會顯得越重要，字號的大小變化能讓版面展現(xiàn)出強弱變化;最引人注意的標題，在版面中會比其他字體更粗;重要的文字可以換作其他顏色加以區(qū)分，紅、黃、橙等暖色被稱為前進色，它們比藍、綠這些冷色更能起到吸引人眼球的作用。

以上就是APP界面設計中的字體設計相關分享，希望對大家的設計之路有所幫助。另外，小編想說，不同風格的字體會給人帶來不同的視覺體驗，所以大家要關注這一點。

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