移動(dòng)APP界面設(shè)計(jì)的工作流程詳解
一、交互流程設(shè)計(jì)
如同建造房屋的平面圖紙，交互流程設(shè)計(jì)是APP界面的基礎(chǔ)。在開始設(shè)計(jì)之前，我們需要對(duì)應(yīng)用的功能需求有深入的了解，確保設(shè)計(jì)的流程能夠清晰地反映出應(yīng)用的各項(xiàng)功能。二、風(fēng)格定位
三、功能icon設(shè)計(jì)
功能圖標(biāo)是應(yīng)用在表達(dá)某一操作或功能時(shí)的圖形代表。設(shè)計(jì)時(shí)應(yīng)追求形象、簡(jiǎn)潔，確保能夠準(zhǔn)確表達(dá)其代表的功能，使用戶能夠迅速理解并操作。四、界面視覺效果優(yōu)化
在界面視覺效果優(yōu)化階段，我們需要選取與應(yīng)用風(fēng)格相符的圖片。例如，對(duì)于主打圖片分享的APP，我們應(yīng)選擇視覺靚麗、有沖擊力的圖片來增強(qiáng)用戶體驗(yàn)。五、應(yīng)用icon及品牌設(shè)計(jì)
這是設(shè)計(jì)流程的最后一個(gè)環(huán)節(jié)，主要任務(wù)是設(shè)計(jì)這款A(yù)PP的icon和品牌形象。我們需要確保設(shè)計(jì)能夠最優(yōu)化地代表這款A(yù)PP的特色和品牌，給用戶留下深刻印象。移動(dòng)應(yīng)用界面設(shè)計(jì)的尺寸設(shè)置及規(guī)范探索
一、Android篇
1、Android分辨率
Android的多分辨率問題一直是設(shè)計(jì)師和開發(fā)者面臨的一大挑戰(zhàn)。Android支持多種不同的dpi模式，包括ldpi、mdpi、hdpi、xhdpi、hdpi、xhdpi等。了解這些模式對(duì)于設(shè)計(jì)出適應(yīng)不同設(shè)備的界面至關(guān)重要。 值得注意的是，dpi和ppi雖然都是密度單位，但在實(shí)際應(yīng)用中有所不同。dpi主要用于輸出，特別是在打印設(shè)備上，而ppi更常用于描述圖像分辨率。在移動(dòng)設(shè)備上，可以將ppi視為等同于dpi。 為了了解不同設(shè)備的分辨率，我們可以使用PPI計(jì)算公式。以iPhone 5為例，其PPI計(jì)算方式為：√（長(zhǎng)度像素?cái)?shù)2+寬度像素?cái)?shù)2）/屏幕對(duì)角線英寸數(shù)。對(duì)于Android手機(jī)，我們可以通過類似的方式了解其分辨率和dpi。2、單位換算方法
在Android開發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp。這些單位與設(shè)計(jì)師在PS中使用的px有所不同。了解這些單位的換算方法是設(shè)計(jì)師和開發(fā)者的必備技能。 簡(jiǎn)單來說，px是我們UI設(shè)計(jì)師在PS里使用的單位，同時(shí)也是手機(jī)屏幕上所顯示的。而dp是開發(fā)者在寫layout時(shí)使用的尺寸單位。為了更好地適應(yīng)不同的設(shè)備和屏幕密度，我們需要將sp和dp代替px進(jìn)行設(shè)計(jì)和開發(fā)。以上是移動(dòng)APP界面設(shè)計(jì)的工作流程及移動(dòng)應(yīng)用界面設(shè)計(jì)的尺寸設(shè)置及規(guī)范的詳細(xì)介紹。隨著移動(dòng)設(shè)備的普及和技術(shù)的進(jìn)步，界面設(shè)計(jì)越來越重要。一個(gè)好的界面設(shè)計(jì)不僅可以提升用戶體驗(yàn)，還可以吸引更多的用戶。關(guān)于設(shè)計(jì)稿單位換算及基本元素尺寸設(shè)置的指南
一、PPI與單位換算
在設(shè)計(jì)與應(yīng)用開發(fā)中，我們需要理解PPI（像素密度）對(duì)設(shè)計(jì)呈現(xiàn)的影響。當(dāng)我們?cè)诓煌腜PI設(shè)備下展示設(shè)計(jì)時(shí)，內(nèi)容的高度大小會(huì)因PPI的變化而變化。但某些設(shè)計(jì)元素，如使用dp（密度獨(dú)立像素）定義的設(shè)計(jì)，其呈現(xiàn)的高度大小并不會(huì)因PPI的變化而變化，因?yàn)樗鼈兏咏锢沓尸F(xiàn)。
根據(jù)單位換算方法，我們可以得出以下結(jié)論：
1. 在mdpi模式下，1dp等于1px。這意味著設(shè)計(jì)師在PS里定義的item高度，開發(fā)時(shí)也需要按照相同的dp值來定義。
2. 在hdpi模式下，1dp等于1.5px。設(shè)計(jì)師在設(shè)計(jì)時(shí)需要考慮這一換算比例。
3. 在xhdpi模式下，1dp等于2px。設(shè)計(jì)師需要根據(jù)此比例進(jìn)行設(shè)計(jì)稿的調(diào)整。
當(dāng)你的應(yīng)用需要適配多種dpi模式時(shí)，請(qǐng)根據(jù)上述比例進(jìn)行相應(yīng)的換算。
二、設(shè)計(jì)稿基本元素的尺寸設(shè)置
為了適應(yīng)多分辨率的手機(jī)，理想的方式是為每種分辨率制作一套設(shè)計(jì)稿。但在實(shí)際開發(fā)中，這種方法并不現(xiàn)實(shí)。我們通常采用折中的方法。
方法一是基于標(biāo)準(zhǔn)分辨率（如xhdpi）進(jìn)行設(shè)計(jì)，然后放大或縮小以適應(yīng)其他尺寸。但這種方法在高分辨率手機(jī)上可能會(huì)導(dǎo)致圖標(biāo)質(zhì)量下降。
方法二是以最高分辨率為基準(zhǔn)進(jìn)行設(shè)計(jì)，然后縮小以適應(yīng)小分辨率設(shè)備。但這種方式可能導(dǎo)致加載速度慢、耗費(fèi)流量多，對(duì)小分辨率用戶不夠友好。
結(jié)合考慮，推薦設(shè)計(jì)稿的畫布尺寸為720x1280，分辨率為72ppi。這樣可以在不同設(shè)備上實(shí)現(xiàn)較好的顯示效果。
在android規(guī)范中，對(duì)于導(dǎo)航欄、工具欄等尺寸沒有明確規(guī)定。但根據(jù)48dp原則及主流android應(yīng)用的尺寸分析，我們可以得出以下尺寸要求：
狀態(tài)欄高度：50px
導(dǎo)航欄、操作欄高度：96px（48dp x 2）
主菜單欄高度：96px
內(nèi)容區(qū)域高度：1038px（1280-50-96-96=1038）
Android新手機(jī)多去掉實(shí)體鍵，功能鍵移至屏幕中，其高度與菜單欄相同，為96px。
三、圖標(biāo)和字體大小
在設(shè)計(jì)過程中，圖標(biāo)和字體大小也是非常重要的部分。以下是一些官方規(guī)范文檔中的指導(dǎo)：
1. 啟動(dòng)圖標(biāo)（home頁或app列表頁）：整體大小為48x48dp。
2. 操作欄圖標(biāo)：代表用戶在app中可使用的最重要功能，整體大小為32x32dp，圖形實(shí)際區(qū)域?yàn)?4x24dp。
3. 小圖標(biāo)/場(chǎng)景圖標(biāo)：用于表示操作或特定項(xiàng)目的狀態(tài)，如gmail app的星型標(biāo)記等。整體大小為16x16dp，圖形實(shí)際區(qū)域?yàn)?2x12dp。
4. 通知圖標(biāo)：當(dāng)app有新通知時(shí)，顯示在狀態(tài)欄的圖標(biāo)。整體大小為24x24dp，圖形實(shí)際區(qū)域?yàn)?2x22dp。
一、Android設(shè)計(jì)規(guī)范中的尺寸與單位
在Android開發(fā)中，尺寸單位主要采用dp（密度獨(dú)立像素）。對(duì)于設(shè)計(jì)稿尺寸為720 x 1280的情況，圖標(biāo)大小需要在規(guī)范要求的尺寸數(shù)字上乘以2。例如，操作欄圖標(biāo)的標(biāo)準(zhǔn)尺寸為32 x 32 dp，在設(shè)計(jì)稿上則應(yīng)為64 x 64 px。
關(guān)于字體大小，Android規(guī)范的要求是使用sp單位，換算關(guān)系為spppi/160= px。在720 x 1280的設(shè)計(jì)稿上，推薦使用的字體大小有24px、28px、32px、36px，具體選擇要根據(jù)文字的重要程度來定。
除此之外，還有一些其他尺寸要求。例如，可觸摸的UI元件的標(biāo)準(zhǔn)尺寸是48dp，這是為了保證用戶能準(zhǔn)確舒適地觸摸目標(biāo)區(qū)域。每個(gè)UI元素之間的空白通常是8dp。
二、iOS設(shè)備的分辨率與單位換算
iOS設(shè)備的界面尺寸主要有iPhone和iPad兩種。iPhone的界面尺寸隨著不同版本有所變化，但分辨率通常保持在72ppi左右。在設(shè)計(jì)時(shí)，需要考慮到不同分辨率下的顯示效果。
在iOS開發(fā)中，單位換算非常重要。pt（磅值）是物理長(zhǎng)度單位，與px之間的換算關(guān)系需要考慮到屏幕密度（ppi）。在Retina屏出現(xiàn)之前，iPhone的屏幕像素是320x480px，而4S之后的iPhone屏幕密度翻倍，達(dá)到326ppi。在設(shè)計(jì)時(shí)，一般采用640×960或者640×1136的尺寸進(jìn)行設(shè)計(jì)，畫布分辨率設(shè)為默認(rèn)的72ppi，設(shè)計(jì)師可以統(tǒng)一采用px為單位。開發(fā)拿到設(shè)計(jì)稿后，需要將標(biāo)注的以px為單位的字號(hào)大小、圖像尺寸除以2，得到非Retina屏上的pt值。這樣在不同的分辨率下都能保證合適的效果。
三、iOS基本元素的尺寸設(shè)置
iOS的APP界面一般由四個(gè)元素組成：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域。每個(gè)元素都有其標(biāo)準(zhǔn)的尺寸和比例，以保證界面的整體協(xié)調(diào)和用戶使用的便捷性。
四、設(shè)計(jì)稿的預(yù)覽與調(diào)整
在設(shè)計(jì)過程中，預(yù)覽和調(diào)整設(shè)計(jì)稿的尺寸是非常重要的環(huán)節(jié)。設(shè)計(jì)師需要根據(jù)目標(biāo)設(shè)備的尺寸和分辨率進(jìn)行設(shè)計(jì)，同時(shí)考慮到不同設(shè)備屏幕密度的差異。通過合理的尺寸規(guī)劃和調(diào)整，確保設(shè)計(jì)在不同設(shè)備上都能呈現(xiàn)出最佳的效果。
五、總結(jié)
無論是Android還是iOS設(shè)備，設(shè)計(jì)過程中都需要考慮到設(shè)備的分辨率、屏幕尺寸和單位換算等因素。通過深入理解設(shè)備的尺寸規(guī)范和要求，設(shè)計(jì)師可以創(chuàng)建出既美觀又實(shí)用的界面設(shè)計(jì)，提供良好的用戶體驗(yàn)。
界面設(shè)計(jì)尺寸規(guī)范
狀態(tài)欄
狀態(tài)欄，也就是顯示手機(jī)狀態(tài)的區(qū)域，包含了信號(hào)、運(yùn)營(yíng)商、電量等信息。其高度設(shè)定為40px，這是為了保持界面簡(jiǎn)潔，同時(shí)確保重要信息一目了然。導(dǎo)航欄
導(dǎo)航欄是顯示當(dāng)前界面名稱以及功能按鈕的區(qū)域，它能夠幫助用戶快速跳轉(zhuǎn)到其他頁面或功能。其高度設(shè)定為88px，這樣的高度既能展示清晰的標(biāo)題，又不會(huì)占據(jù)太多屏幕空間。主菜單欄
主菜單欄類似于頁面的主菜單，提供了整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)。其高度設(shè)定為98px，這樣的設(shè)計(jì)使得用戶能夠方便快捷地訪問應(yīng)用的不同部分。內(nèi)容區(qū)域
內(nèi)容區(qū)域是展示應(yīng)用提供的相應(yīng)內(nèi)容的區(qū)域，其布局變更最為頻繁。在640×960尺寸下，內(nèi)容區(qū)域的高度為734px，這是為了在保證展示足夠內(nèi)容的保持界面的整潔和舒適。 對(duì)于iPhone 4、4S，iPhone5/5s的640×11136尺寸，內(nèi)容區(qū)域的高度增加到910px，其他尺寸保持不變。圖像、圖標(biāo)大小規(guī)范
字體大小規(guī)范
iOS交互設(shè)計(jì)規(guī)范文檔并沒有對(duì)字體大小做出嚴(yán)格的數(shù)值規(guī)定，而是給出了一些指導(dǎo)原則。字體單位采用點(diǎn)（pt）。 其中，即便用戶選擇了最小的文字大小，文字也不應(yīng)小于22點(diǎn)。正文樣式則使用34點(diǎn)字體大小作為默認(rèn)設(shè)置。每一檔文字大小設(shè)置的字體大小和行間距的差異通常是2點(diǎn)。標(biāo)題樣式使用加粗效果以與正文樣式區(qū)分。 導(dǎo)航控制器中的文字使用34點(diǎn)的文字大小。文本通常使用常規(guī)體和中等大小。開發(fā)APP的流程
在開發(fā)APP的過程中，用戶需求分析是最重要的一環(huán)，它決定了APP的成功與否。此環(huán)節(jié)需要與客戶密切溝通，梳理和分類客戶的需求，整理出大體的APP功能框架。產(chǎn)品原型設(shè)計(jì)
在完成一輪用戶需求分析之后，需要整理出的需求進(jìn)行分類、整理和排序，形成功能結(jié)構(gòu)模塊。此時(shí)可以利用現(xiàn)有的功能模塊搭建一個(gè)簡(jiǎn)單的產(chǎn)品原型，類似于APP產(chǎn)品的草圖。產(chǎn)品原型能夠基本展示功能結(jié)構(gòu)，并借助產(chǎn)品原型設(shè)計(jì)軟件模擬出相似的APP產(chǎn)品。將此產(chǎn)品原型與客戶進(jìn)行確認(rèn)后，即可進(jìn)入下一環(huán)節(jié)的開發(fā)。APP開發(fā)全過程詳解
一、UI視覺設(shè)計(jì)
在獲得APP產(chǎn)品的原型草圖結(jié)構(gòu)之后，UI設(shè)計(jì)師們會(huì)開啟美化之旅。他們根據(jù)APP的主題和內(nèi)容，著手進(jìn)行版面結(jié)構(gòu)設(shè)計(jì)，為每一塊區(qū)域精心配色，并逐一設(shè)計(jì)功能菜單的圖標(biāo)及其他頁面元素。這一過程不僅考驗(yàn)設(shè)計(jì)師的審美，更需與其客戶緊密溝通，吸納客戶的建議，打造出一幅幅生動(dòng)的APP界面效果圖。
二、數(shù)據(jù)庫搭建
基于需求分析中整理的功能數(shù)據(jù)處理情況，開始構(gòu)建合理的數(shù)據(jù)庫表結(jié)構(gòu)。對(duì)數(shù)據(jù)算法進(jìn)行優(yōu)化，旨在提升數(shù)據(jù)的處理效率。在此過程中，確保APP在使用過程中數(shù)據(jù)的安全性、準(zhǔn)確性、穩(wěn)定性和及時(shí)性，為APP的順暢運(yùn)行打下堅(jiān)實(shí)基礎(chǔ)。
三、服務(wù)端開發(fā)
APP應(yīng)用的核心處理過程大多是由服務(wù)器端的程序完成的。由于用戶的移動(dòng)端設(shè)備硬件配置和存儲(chǔ)容量有限，核心數(shù)據(jù)處理過程通常由服務(wù)器端進(jìn)行運(yùn)算處理，這一方式也被稱為云計(jì)算。服務(wù)器處理完畢后，將結(jié)果反饋給客戶端APP。服務(wù)器端的程序開發(fā)至關(guān)重要，需嚴(yán)格按照需求分析階段整理的功能進(jìn)行開發(fā)，確保APP的功能完備與穩(wěn)定。
四、iOS/Android客戶端開發(fā)
根據(jù)設(shè)計(jì)師的APP效果圖，開始客戶端的開發(fā)。這一過程主要是將設(shè)計(jì)效果圖轉(zhuǎn)化為代碼，并接入功能調(diào)用的接口，與服務(wù)器端進(jìn)行連接，實(shí)現(xiàn)數(shù)據(jù)的交互。針對(duì)Android和iOS的設(shè)備軟硬件特性，進(jìn)行專門的APP開發(fā)和優(yōu)化，最終打造出與效果圖一致的APP客戶端。
五、APP程序測(cè)試
對(duì)開發(fā)完成的APP客戶端進(jìn)行全面測(cè)試。模擬用戶正常使用及非正常使用的情況，導(dǎo)入測(cè)試數(shù)據(jù)進(jìn)行測(cè)試，并記錄測(cè)試結(jié)果。如存在錯(cuò)誤，則返回開發(fā)階段進(jìn)行修復(fù)。若測(cè)試通過，則說明整體APP開發(fā)過程已完成。將APP交付給用戶進(jìn)行試用，待用戶滿意后，方可進(jìn)入下一步工作。
六、上傳到應(yīng)用商店
完成簽名驗(yàn)證后，將客戶端APP程序提交至各應(yīng)用商店。iOS版本的APP提交至AppStore，而安卓版則提交至國(guó)內(nèi)各大安卓應(yīng)用商店，完成APP的發(fā)布。
七、APP的維護(hù)及更新
對(duì)于已經(jīng)上線的APP，進(jìn)行持續(xù)的維護(hù)，收集用戶反饋信息，及時(shí)修復(fù)其中的錯(cuò)誤（Bug）。若客戶需要進(jìn)行功能更新，則返回至需求功能整理階段進(jìn)行新功能的開發(fā)。新功能經(jīng)測(cè)試通過后，即可發(fā)布更新，確保APP始終滿足用戶需求，保持活力。
注意事項(xiàng)：
從初步了解用戶需求到最終的測(cè)試上線，一個(gè)完整的APP開發(fā)過程需要緊扣用戶需求。只有深入了解并滿足用戶的真實(shí)需求，才能避免開發(fā)出質(zhì)量差、不被用戶認(rèn)可的APP軟件。這是每個(gè)APP開發(fā)企業(yè)都需要高度重視的關(guān)鍵環(huán)節(jié)。
