app界面設計流程

『壹』 如何設計APP界面

1明確傳達主旨
優秀的APP界面視覺設計首先是能夠非常明確的傳達這個APP的主旨的，說白了就是這個APP是用來干什麼的。產品必須是一個優雅的整體，產品的設計必須是由內而外的統一、協調，像萬萬沒想到里的孔女神一般只存在於電影或者游戲當中。所以，色彩、圖案、形態、布局等的選擇必須與APP的功能、情感相呼應，務必做到一脈相承，零時間傳達APP的概念。
2有特點、吸引人
優秀的APP界面視覺設計是有特點的、吸引人的，特別是在第一眼的時候。當然這必須先滿足上面那一點，而不是單純的為了搏眼球、搏出位。整個設計過程會是一場微妙的博弈與平衡，以達到一種魅力的素雅的耐看的境界。
3體諒用戶
優秀的視覺設計師是能夠體諒用戶的。每做一個決定的時候，都是從用戶的角度出發，而不是總是陷入無限的自我的陶醉或者情懷當中。
4精通多種風格
優秀的視覺設計師是熟悉精通多種風格的。用戶是多樣的，需求是多種的，流行是會隨著時間變化的，APP的視覺有什麼理由不做出必要的改變呢？
5個人理念
優秀的視覺設計師是有自己的理念的。這種理念不會是狹隘的扁平化或者擬物化，這些只是表象的手段。這種理念應當是基於它是如何有益於用戶的，又或者給用戶帶來什麼樣的好處，獲得了什麼樣的啟發，或許是生理上的，或許是情感上的。

『貳』 在整個app開發的流程中，ui設計要畫具體的界面，需要先獲得什麼材料

你指的UI設計師應該是視覺設計師
材料：低保真原型圖，提供方是產品經理或者交互設計師
相關競品的參考界面

『叄』 一個App 的界面設計流程是怎麼產生的

[商侶軟體]app開發平台指出，一個手機app的介面設計流程，一般都是先有原型策劃，確認好原型之後，UI界面設計就根據原型的框架來設計，並且進行優化處理。

『肆』 如何開始設計app界面

1、 開發的App軟體主旨要明確
優秀的App軟體的界面設計必須得明確得傳達這個App應用的主旨，讓用戶內看到這個App產品就容知道是用來干什麼的。App界面設計必須是一個優雅的整體，從內到外都必須做到統一、協調，快速傳達App應用的功能。

2、 開發的App軟體要有特點
優秀的App界面設計必須具有自己的特點，而且這個特點還能夠吸引到用戶。因為，用戶在沒使用App應用時，第一眼看到的是你這個App軟體的界面，所以界面設計的好壞直接決定了App軟體的存亡。

3、 開發的App軟體界面風格多樣且不重復
優秀的App視覺設計還得是風格多樣的，這樣才能滿足不同用戶的需求。用戶不同，需求也是不同，而且還會隨著時間的變化而有所改變。

4、 開發的App軟體應從用戶角度出發
App軟體的界面設計要多從用戶的角度去考慮，多想想用戶要的是什麼，聽聽用戶的聲音。

『伍』 界面設計哪裡好，一個App的界面設計流程是怎麼產生的

App界面設計是UI設計師們普遍需要設計的內容，具體App界面設計流程是怎麼產生的？剛好我在培訓學院了解咨詢過相關的設計流程，再結合一些企業內部設計師們的工作情況，最後為大家總結出了以下幾個方面，針對產品經理、交互設計師、視覺設計師提出的建議。
完整的流程，分層次設計，自下而上去完成：

1、策略層，定義產品使命、價值、目標人群

2、願景/功能層：定義核心場景、功能列表

3、結構層：做流程圖、信息架構，確定主導航、主菜單

4、框架層：梳理每一個主界面的內容、布局

5、表現層：視覺設計，涉及圖標、配色、切圖。

產品經理主要關注1~2，在去找設計師之前，請先問自己以下幾個問題，以保證需求明確：

1、產品給用戶帶來的價值是什麼？

2、競品有什麼？我們做這個有什麼優勢？

3、為什麼樣的用戶而做？

4、用戶會在什麼樣的場景下使用這個產品？

5、要完成這個產品，最大的瓶頸是什麼？是技術攻關？體驗出彩？還是運營資源？

交互設計師主要關注3~4，在交付方案之前請先不斷問自己以下幾個問題，以保證體驗質量：

1、該界面要求用戶完成的最重要的任務是什麼？

2、這是最簡單的解決方案嗎？

3、信息是否組織得當？

4、設計是否易用且一目瞭然？

5、標準是否一致？

6、能否減少用戶點擊次數？

視覺設計師主要關注5，在與產品經理PK之前請先不斷問自己以下幾個問題，以保證減少返工：

1、界面上需要突出的重點是什麼？是否進行了有效的突出？

2、界面上一共有幾個層級，是否用清晰的視覺語言予以展現？

3、同樣層級、同樣性質的元素是否用了一致的設計語言？

4、主色調、材質，是否符合整體品牌感？

5、細節有無丟失？按鈕點擊態、反饋、預設狀態、字數超出、載入中、未載入態、載入失敗態，是否都提供了？

另外，合作不易，三個角色分別需要注意的問題：

對於產品經理：

1、APP的設計，不要只看競爭對手確定自己的定位，不要「因為競品A和B沒有做到，所以我們要做比A和B更牛B的XX功能」，而是要以用戶為導向，思考自己為客戶提供的價值。在向其他人描述你的想法時，請用這樣的句式來描述和思考：XXX這一類型的人在XXX的時候、XXX的環境下，想要做XXX事情，遇到了XXX問題。而我們這個APP能夠通過XXXX方式巧妙的幫助他解決了這個問題。

2、不要直接拿線框圖給交互設計師看，直接描述你的需求即可，描述清楚。讓設計師知道你的目標是什麼，接下來讓交互去畫原型，讓更專業的人做專業的事。

3、不要太糾纏視覺，對於一些無關緊要的細節，該放手就放手，盡量減少提出主觀意見。

4、別太迷信用戶反饋，能提反饋的，大部分都是粉絲、深度用戶、高級用戶，他們代表不了全部用戶的心聲。

5、讓開發主管去評估工作量，如果對某一部分工作量的評估覺得時間太長，就把它拆分成子任務。

6、每周對一到兩次開發成果，別頻繁的去打擾人家。

7、bug不斷發現，不斷修復，發現/修復率小於1，才開始變得可控了，才能確定bug的具體規模並精準預測發布日期

8、少做少錯，新版本盡量別加太多錦上添花的功能，滿足最核心的就行了。

對於交互設計師：

1、不要一提商業化就頭疼，誰不想做一個乾乾凈凈沒廣告的APP ? 別老想著高大上，目標最重要。通過你的設計，讓用戶消無聲息的貢獻點擊，讓商業化變得人性化，這才是你的本事。

2、別太窩囊，別產品說怎麼改，就怎麼改，要跟他爭，把自己當成產品的owner，產品的數據、規劃，你全都要知道，這樣信息對等了，才有話語權，才能有機會站在用戶角度提供人性化的設計建議，否則只能是個畫線框圖的。

對於視覺設計師：

1、簡潔不等於好（在業界大談特談簡約至上的風氣下，一定有人對這句有疑問，不細解釋，請自行先翻一下諾曼的《如何管理復雜》這本書）。符合用戶的心智模型，讓人一目瞭然，才是好。

2、別做一大堆方案，ABC方案拋出去讓人選，這樣累不累？自己先判斷哪一個方案最好，把它做到自己滿意、可行、拿得出手，就行了，不要淪為美工。

3、給開發的視覺稿，先自己想一下，布局如何實現，不同屏幕尺寸如何適配。如果有動畫效果，別天馬行空的描述，能做出動畫示意最好，做不出來，也找一個靠譜的示意。別讓開發gg太上火。

最後，90%的問題本質上都是溝通問題！90%的爭論本質上都是名詞之爭！

總結
• 不管對於產品經理還是交互設計師或者是視覺設計師而言，在整個App界面設計流程中都需要做好准備，多思考解決問題的方案並付諸於行動，只有大家都互相通力合作了，整個App的UI界面才能初步有一個完整的雛形，UI設計的整個流程才能更加有效率。永遠記住以用戶的想法為核心，再進行進一步的設計，這是UI設計中最基本的理念。
o 來源：UI設計達人

『陸』 一個 App 的界面設計流程是怎麼產生的

一、項目背景 朋友圈裡每天都有人刷跑步足跡，微信運動的步數更是搶占封面，越來越多人喜歡使用電子設備去記錄自己的運動信息。面對琳琅滿目的穿戴市場，一款可以記錄各種運動數據的運動手環App顯得格外重要。甲方爸爸本身就是一位運動達人，他覺得現在市面上雖然有眾多的手環，但記錄的數據單一，且大多數都是記錄基本的步數或卡路里，這樣的手環無法滿足運動愛好者的需求。

五、視覺設計 等客戶確認原型圖後，進入了視覺設計階段，視覺設計包括了幾大步驟，分別是風格圖的確認、設計規范的撰寫、以及最後高保真圖的輸出及切圖。其中，UI風格圖是確定整個App的整體風格，包括顏色、排版等，如果客戶確認了風格圖，就可以開始撰寫設計規范，設計規范看似是在增加設計師工作量，其實它對於後面工作的開展以及程序員的功能實現，都是有很大幫助的

『柒』 一個APP終端界面設計流程是怎樣的

APP界面設計，主要是一個流程。包括：1、交互流程設計；2、風格定位；3、功能icon設計；4、界面視效整體優化；5、應用icon設計，6是否符合用戶習慣，扁平化。

『捌』 一個App 的界面設計流程是怎麼產生的

APP界面設計，主要是一個流程。包括：1、交互流程設計；2、風格定位；3、功能icon設計；4、界面視效整體優化；5、應用icon設計一個App 的界面設計流程是怎麼產生的

『玖』 APP界面設計注意什麼

APP界面設計應從圖片、文字、色彩、圖標、留白這些方面注意著手於設計。

1、圖片，如同一個人的衣著品味

圖片在APP中是非常常見的，圖片的展現形式和圖片的質量都影響著用戶對產品的感官體驗。

圖片的定位就如同一個人的衣著品味，不同的穿衣風格會使別人對你作出不同的判斷，為你打上不同社會屬性的標簽。

下面我們一起來看看圖片在APP設計中需要注意的關鍵點，將會從圖片比例、一致性、圖片質量與真實性等方面進行分析。

1.1、圖片比例有什麼講究？

不同比例的圖片所傳達的信息主體不盡相同，根據產品屬性我們會選擇與之相符的圖片比例進行整體的框架布局。

通過體驗一些主流的APP，我們會發現一些比較常用的圖片比例，如 1:1、4:3、16:9、16:10等等；

也會發現一些打破常規比例的設計，我們需要分析它們的性格，結合自身產品的特點，才能在自己的APP設計中合理的加以運用。

1:1 強調主體的存在感

1:1的圖片比例是比較常見的一種設計比例，利用此長寬比更容易將構圖歸整得簡單，突出主體的存在感。

常用於產品展示、頭像、特寫展示等場景，在電商類APP中尤為常見。

4:3 圖像緊湊、更易構圖

4:3的圖片比例可以使圖像更緊湊，更易構圖，方便設計師發揮。由於手機屏幕容量較小，作為全屏展示時，該比例在App設計布局上面佔用空間較大。

16:9 電影場景般的效果
16:9的圖片比例可以呈現電影場景般的效果，多用於橫向構圖，是應用非常廣泛的尺寸比例之一，能給用戶一種視野開闊的體驗。

在很多影視娛樂類APP設計中運用廣泛，如騰訊視頻、網易雲音樂等。

16:10 擁抱黃金比例
黃金比例就像金字塔上的明珠，越接近她越有魅力，反之會魅力減弱，16:10的圖片比例最為接近。

設計沒有絕對的標准，我們可以遵循一些優秀的經驗規則，但是也要敢於突破規則，嘗試更多的可能性。

X:≤Y 瀑布流設計
X:≤Y代表寬度固定，高度在最大值之間自定義的瀑布流設計，在一些用於用戶沒有很明確的目的，只是喜歡獲取盡量多的信息的情況下採用這種設計方式。

X:≤Y的圖片比例要注意高度的控制，不要超出屏幕可顯示區域的范圍，如花瓣網在750x1334px的設計中高度最大值為：848 px。

以上列舉的僅為部分常用比例的分析與說明，還有更多的比例這里就不一一演示，分享的目的是讓大家養成分析的習慣，結合自身產品特點選擇適合的圖片比例。

圖片比例選擇方式：
a. 以商品展示效果為准，選擇能夠充分表現商品特點的圖片展示比例；
b. 以產品氣質為准，選擇符合產品內容氣質的圖片展示比例；
c. 結合產品特點選擇合適的常用比例；
d. 根據版面布局靈活的自定義特殊的比例值；
e. 分析→打破→創新，創造出符合某種規律或者美學概念的比例值。

1.2、圖片比例的一致性
當我們結合產品特點確定合適的圖片展示比例以後，需要針對整體的布局與圖片分布情況，規范出那些布局可以採用相同的圖片展示比例。

在保障視覺效果與交互形式的情況下，相同的主體，在不同的頁面中最好採用相同的比例呈現，這樣的好處不僅可以保持視覺表達的一致性，也能給後期運營維護帶來便利。

1.3、提高圖片的質量
越來越多的產品對圖片質量開始加以重視，比如網易嚴選對產品圖片的拍攝與處理都有嚴格的規范，目的就是為了提升產品氣質和在用戶心中的印象。

我們在設計的時候更要以最佳的圖片來烘托我們的設計稿，圖片的質量影響著整個界面的格調。

很多夥伴兒會覺得圖片都是後期運營上傳的，我設計稿做得再精美最終也是沒用的。對於這個問題我的觀點是這樣的：

a. 最佳的設計輸出是設計師專業的體現；
b. 把最好的效果呈現給決策者，增加他對你設計能力的印象；
c. 通過制定運營視覺規范來把控圖片質量，是可以嚴格把控你對圖片的視覺追求；
d. 你的態度會給你帶來好運。

1.4、圖片的真實還原

雖然前面提到圖片質量的重要性，但是我們不能為了視覺效果選擇一些與主題無關的配圖，這樣也會給決策者一種誤導。

我們可以提高配圖的質量，但是需要保證圖片的真實還原，這樣才能讓你的設計作品更加真實合理。

在一些本土的產品設計中，對於國外圖片素材的運用，需要謹慎對待。如案例中的模特形象，文案信息的傳達更加偏向於國內的場景，

如果運用一張國外的模特素材也許逼格更高，可是卻無法真實的還原產品場景，會給決策者傳達一種錯誤的認知。

2、文字，我只想知道重點在那裡

文字設計的層次感決定了信息的高效傳達，通過對文字信息的層次處理可以有效的幫助用戶獲取信息，提高用戶對產品的操作效率。

2.1、對文字信息進行層級區分
當我們拿到交互原型或者別的需求文檔時，我們需要對文字的信息層級進行有效的區分，這樣才能讓用戶快速的獲取和理解信息傳達的內容。

文字信息可以簡單劃分為重要信息、次要信息、輔助信息等。在進行文字排版時，需要明確的梳理好信息之間的層級關系，提高用戶對產品的整體體驗。

通過對字體大小、顏色、留白、層級劃分等處理，把相同屬性的信息歸類設計，讓整個信息排列主次分明，層級清晰。

設計師在對文字進行視覺表現時，為了達到整體界面的視覺平衡也需要減少對文字樣式的運用，不可為了突出文字信息而採用過多的表現樣式。

2.2、預估好信息呈現的最大值
當我們在進行界面設計時，初級設計師往往會忽略文字信息的最大值，只是按照自己的習慣進行完美的布局。

最終進入到測試環節時才發現為什麼比自己預期的字數多出這么多信息，此時就會出現返工的情況，給整體的產品開發進度帶來風險。

作為一名合格的UI設計師，我們需要預估好信息呈現的最大值，而不是取最小值或者隨意進行設計，這樣將會在執行的過程中遇到更多不可控的風險。

2.3、善於利用提示符進行設計

在一些會出現大篇幅文字信息的界面設計中，為了提高用戶對信息的獲取效率，我們會根據整體視覺效果選擇合適的提示符進行設計。

很多初級設計師會過於遵循交互原型，往往對大篇幅文字的處理過於隨意，只做著交互原型的美化，缺乏對用戶體驗的主動性。

在進行產品交互設計時，有時候產品或者交互無法站在視覺的角度進行信息的梳理和布局，我們需要利用自己的專業來優化你覺得可以更好的地方，也能為你在整個產品環節中樹立專業性。

關於提示符的設計表現形式主要有數字、字母、圖形、色塊等等，只要能有效的區分信息層級即可。

3、色彩，如何成為「色」計師

色彩給人的感受是最直觀的，不同性格的配色傳達不同的情感。關於配色有一些方法可尋，但是也存在一定的感性判斷。

作為視覺設計師，我們需要學習理性的方法技巧，也要不斷欣賞優秀的作品，提高自身的審美能力。

3.1、色彩基礎知識
色彩分為無彩色系和有彩色系，無彩色系是指白色、黑色、各種深淺不同的灰色；有彩色系是指紅、橙、黃、綠、青、藍、紫等顏色。

關於色彩的更多理論知識這里不做展開，大家自行腦補色相、純度、明度、對比、性格等等方面的理論知識。

3.2、建立色彩庫
作為初級設計師我們對配色的把控不是很穩定，為了提高工作效率，我們需要通過一些理性的方式建立大量的色彩庫，應對不同的需求。

下面列舉部分個人比較常用的方式供大家參考，色彩收集的方法有很多，我們只需要掌握幾個比較適合自己的即可，只要養成習慣並長期堅持，哪怕只運用一種方式，也是收獲頗豐的。

a. 通過各類APP採集色彩

體驗不同領域的APP，建立不同領域對APP色彩組合的選擇，為後期項目設計奠定基礎。根據主色進行分類，

如紅色系列：網易雲音樂、京東、網易嚴選、網易考拉等等；也可以根據產品氣質分類，如文藝、時尚、科技、可愛等等。

b. 通過Dribbble採集色彩
在Dribbble上面，每一幅作品右側都有該作品的配色文件，發現優秀的作品要養成這種採集配色文件的習慣。

c. 通過攝影作品採集色彩
通過優秀的攝影作品採集色彩也是常用的方法之一。

採集方式：
Photoshop打開圖片 → 存儲為Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器

d. 通過馬賽克採集色彩
藉助Photoshop濾鏡將圖片進行馬賽克處理，可以得到優秀作品或者攝影圖片的配色組合，特別適合採集同色系的配色。

採集方式：
Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設置單元格大小

e. 從電影中採集色彩
相信大家都喜歡看大片，這部片子之所以能得到大家的追捧，必定有太多值得大家學習的元素。

作為神經敏感的設計師群體，那些刺激到我們神經元的優秀影片場景總是不能錯過的。

3.3、提高審美，增強感性判斷力

配色能力雖然可以通過一些理性的方法提高，但是也存在一定的感性判斷。配色中細微的差異往往都是感性的判斷。

我們需要不斷的欣賞攝影、繪畫、設計作品等等，綜合的提高自身的審美，才能不斷增強感性的判斷力。

作為UI設計師，你不能只關注界面設計，你可以看平面作品、攝影繪畫、影視動效，體驗手工藝製作、運動娛樂、細心的體驗生活中的每一次變化。

3.4、養成分析的習慣
要想擁有良好的配色能力，積累的過程是很重要的。當我們看到優秀的作品，要分析配色之間的對比關系、顏色在色環上的位置關系、HSB數值的關系等等。

只有不斷的分析和總結才能逐步形式自己的思維方式，提高不同配色的把控能力。

分析的習慣不只是運用在色彩上面，對於版面布局、文字信息的處理、icon設計風格、間距留白等等方面都需要不斷的進行分析總結，掌握優秀作品的規則才能形成自我的標准習慣。

4、圖標，從會畫到畫好之間有多遠

圖標是APP設計中的點睛之筆，既能輔助文字信息的傳達，也能作為信息載體被高效的識別。圖標也有一定的界面裝飾作用，提高界面整體的美觀度。

很多初級設計師都會忽略圖標的重要性，也養成去素材網站下載復用的習慣，當這樣的習慣養成後便會逐步喪失自己動手的驅動力，什麼元素都希望能找到素材下載，工作數年之後很快就遇到了自己的瓶頸期。

設計師對圖標設計的態度與把控能力，將會是拉開你與其他設計師差距的因素之一。

圖標設計有下載復用 → 動手設計 → 規范設計 → 融入品牌基因等幾個階段，你現在屬於哪個階段呢？

4.1、下載復用

下載復用是很多初入行業的設計師習慣的工作方式之一，由於自身對軟體技法、設計技巧、創意能力等方面的不足，無法從創意到標准制圖完成一個合格的圖標設計。

缺點：圖標設計風格與細節處理都完全不統一，這樣的習慣一旦養成就會逐步喪失自己的動手能力。

4.2、動手設計
對於大部分有設計追求的設計師，都會意識到圖標設計的重要性，也會結合產品特點繪制統一風格的圖標。

注意事項：圖標設計風格有：線性圖標、填充圖標、面型圖標、扁平圖標、手繪風格圖標和擬物圖標等。

無論我們選擇何種表現形式，在進行設計的時候都要保持風格的統一性，由於圖標的體量不同，相同尺寸下不同體量的圖標視覺平衡不盡相同，例如相同尺寸的正方形會比圓形顯大。

因此，我們需要根據圖標的體量對其大小做出相應的調整。

4.3、規范設計
當設計師養成自己動手的習慣以後，恭喜你已經進步了，保持這樣的習慣。隨著軟體技法的成熟我們需要嚴格控制自己的隨性，運用標準的規范進行圖標設計。

在標准設計的基礎上面我們可以發揮自己的創意，也不一定要局限在標准裡面，但是總體的本質需要符合設計規范。

4.4、融入品牌基因
圖標設計的差異化逐漸變得模糊，隨著很多功能的相似性，圖標的造型設計也幾乎雷同，很多對設計比較講究的產品，也開始根據自身品牌基因，進行圖標定製化。

融入品牌基因的圖標設計具有很強的品牌識別性，不僅可以形成獨有的視覺差異化，也可以增強用戶對產品的記憶。

5、留白，我只想要足夠的空間

適當的留白可以讓你的界面更有靈性，給信息之間預留更多的空間，也能更好的表達信息之間的層次感，相比擁擠的信息布局更能給人舒適的體驗。

當設計師的留白意願被產品或運營以「希望放更多內容」拒絕時，作為設計師我們可以從不同的方向試著表達自己的觀點：

a. 設計出對比稿，把產品需要的方案和你覺得完美的方案進行對比；
b. 篩選出這樣處理的優秀案例，以成功的案例說服產品接受你的方案；
c. 進行用戶測試，選擇一些目標用戶進行體驗，從用戶心聲入手設計最佳的方案；
d. 更多溝通的方法有待你去挖掘，最終的目的都是希望做出更好的產品。

設計小結

1. 不同的圖片比例反應不同的特徵，根據產品特點合理的選擇；
2. 設計中保持相同的圖片比例，不僅使視覺表達一致，也能給後期運營維護帶來便利；
3. 通過提高圖片的質量來提高設計作品的美感度，但是也要保證圖片的真實還原；
4. 文字排版需要注意信息的層次、信息容量的最大值、巧妙的運用提示符等；
5. 養成不斷建立和豐富色彩庫的習慣；
6. 提高審美，增強感性判斷力，養成分析的習慣；
7. 圖標設計經歷的幾個環節：下載復用 → 動手設計 → 規范設計 → 融入品牌基因；
8. 適當的留白可以給人更加舒適的體驗。