app界面設計

1. app界面設計分為哪些

不論移動來端網頁和APP之間有源著怎樣的爭論，移動端APP的快速發展都是不爭的事實，各種客戶端的開發和接入已經成為常態。用戶對於自己喜歡的品牌和服務，總期待官方能推出客戶端，也正是在這種期待和需求之下，催生出越來越多的APP。

2. APP應用的界面設計多少解析度

通常是480x800,圖片小些，受眾大寫，在1024上影響也不大。如果要求高，需要區別對待，就會有多種分辨的gui 到eoeAndroid網站查看回答詳情>>

3. 什麼是APP界面設計布局樣式

裡面東西的模塊

4. 當前主流的app界面設計思想是什麼

1.移動優先，簡約主義
移動設備屏幕的方寸之地迫使設計者返璞歸真，必須把那些花俏的修飾和多餘的內容去掉，優先保證對業務和客戶體驗影響最大的功能的呈現。
同樣這還意味著此類應用要想取得成功的話必須專注於極少數的功能子集。Clear這個例子，就是這樣，不僅只選取了待辦事宜中最基本的功能，連界面也是簡約主義。
簡單的界面要求將交互性降到最低。需要優先考慮功能，專注於期望結果的基本需求。這里的挑戰是，要知道創建出一個可行的、令人滿意的產品你需要多少，有多少可以去掉，如何才能夠擴充產品和服務。看看這類應用如何進行演進跟擴充是件有趣的事情。
2.四維思考，彰顯魔力
用戶界面設計者開始意識到，沒有必要再堅持把現實生活中的對象按照原樣照搬進數字空間裡面。數字世界跟現實本來就有差異。它可以賦予用戶魔力。它不再是用戶、滑鼠以及需要跟眼睛協調的手指芭蕾舞。而是用戶直接操作屏幕或者對象，他們所接觸到的是一個用戶無論走到哪裡都可見的四維世界（時間、空間、人、信息）。Clear聚焦於手勢UI很好地詮釋了這種魔力，傳統上的待辦事宜應用必備的復選框和文本輸入不需要了。
3.敏捷設計，動態原型
無論是設計者還是移動平台都被推動著向動畫式的用戶界面設計的方向前進。盡管手勢在日常生活中並非什麼新鮮玩意兒，但是要想恰當地、有意義地把它運用到面向消費者的應用當中，對於設計者來說仍是一項挑戰，因為他們平時習慣於墨守常規，採用靜態的框架來設計界面。而如果軟體和產品研發採用新式的原型化及多學科混合方法（如敏捷方法和新的精益用戶體驗Lean UX）的話，創建出動態的、符合視覺和感覺習慣的原型並就其進行溝通都會更加簡單、更加為用戶所接受。動畫式設計賦予應用以更多的動態運動。跟好電影很類似的是，最關鍵的部分往往是那些靜態幀之間。

5. 手機app端6寸屏幕ui用戶界面設計尺寸是多少

屏幕大小：指來屏幕的物理尺源寸，一般用屏幕對角線長度表示，單位英寸。如 5 英寸屏幕。1英寸 = 2.54 厘米。

獲知手機屏幕的大小主要有兩種方法。注意，雖然提示為「主屏尺寸」，但目前一般的手機輔助類軟體並不提供屏幕大小的查詢，只提供屏幕解析度的查詢。

方法一：去 ZOL 中關村在線查，輸入手機型號搜索即可。（圖中，1 處為屏幕大小，2 處為屏幕解析度）
方法二：用尺量屏幕對角線長度，然後換算成英寸（2.54厘米 = 1 英寸）。

6. 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. 適當的留白可以給人更加舒適的體驗。

7. 怎麼分析app界面設計

• 第一點：了解你的目標客戶群的心態 1、做微任務的目標客戶群(如隨時隨地看看新聞內，聽聽容歌，看看電影，聊聊八卦之類)： 這類的解決方案是設計的app最好是小而准，不要大而全。越全的功能應用，只能代表著這個應用在各方面的都很平庸 2、喜歡當工...

8. 現在app界面的設計流行什麼風格

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

9. app界面設計要注意哪些方面

第一點：了解你的目標客戶群的心態
1、做微任務的目標客戶群(如隨時隨地看看新聞，聽聽歌，看看電影，聊聊八卦之類)：
這類的解決方案是設計的app最好是小而准，不要大而全。越全的功能應用，只能代表著這個應用在各方面的都很平庸
2、喜歡當工具來使用的目標客戶群：比如找地圖，看天氣，查數據等。
這類的解決方案是 我們盡最大努力的去滿足用戶的情景需求。做到極致和簡單。
3、無聊的客戶群，用來打發消磨時間的：無需求，漫無目的的
這類的解決方案是盡可能展示用戶感興趣的東西，幫助客戶來打發消磨時光。

第二點：APP原型圖的製作和設計討論
這個環節是必不可少的。需要根據設計需求認認真真的來畫畫原型圖。
常用的APP原型圖工具：移動APP原型設計神器 POP 、axure、Foreui等

第三點：APP視覺設計與設計要點
（1）大概設計板塊有APP啟動頁面設計，APP界面設計的尺寸規范，app圖標設計等
一般來說，手機屏幕是從上往下布局的，重要的信息會放在上方。但是在操作上，大部分人都是單手拿手機，常用的操作，要放在界面的下方。
另外還有一個原則，最小的觸摸單位，一般是44個像素。如果再小，你的拇指難以觸碰，或者容易引發誤操作。同時，也不要讓界面太擁擠。
所以，設計師必須用減法設計，這個過程需要花時間思考、簡化元素。
你必須記住：（1）隱藏設計或者減法設計 （2）分區或分類 （3）幫用戶做決策 （4）提高交互創新設計 （5）讓人有爽快感和新奇感 （6）在設計中浸入情感，把握用戶的心理。（談談如何進行產品設計以及產品情感化設計）
一位大師這樣說過「真正的簡約設計是：作品必須不斷的被簡化，一改再改，直到設計最終成形。」
2014年 APP設計風格趨向扁平化和卡片化。卡片，扁平化都會是移動app設計的趨勢！認為卡片設計確實同時兼具了「擬物」和「極簡」2種優勢！

第四點：APP界面設計流程

（1）. 設計APP界面時，學會從優秀APP界面設計作品中尋求靈感，以前的藝術大師，用少量的資源做了大量的設計。
（2）. 放下工作，休息一下很有幫助。扁平和簡約設計的一切均關乎到細節的差異。因此小憩片刻後再回到工作，帶著全新的眼光工作，比長時間冥思苦想更有
效。
（3）. 並排比較各個版式同樣有幫助。哪怕花20分鍾前將一個線條下移各5個像素分別保存，對比兩個版式就能很快分清孰好孰壞。
（4）. 由於實物展示的相對比例至關重要，所以要及早在不同的目標設備上測試。
（5）. 整個設計過程中不斷問自己「真的需要嗎？」 。支撐項目時候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會這樣會很容易也會很吸引人，
但必須始終注意剔除不必要的元素，不斷精簡。甩掉你費盡心血的部分總是難以割捨，但修改過程必須挑剔。

第五點：APP界面設計測試與預覽修正
設計完成之後，我們可以把設計圖導入手機測試或者是校正。之前發布的在線測試工具：快速在移動終端上預覽APP界面設計效果圖的方法最後：好的APP界面設計作品必然是要經過不斷升級、重復迭代的。

10. android app 界面設計按什麼尺寸

android app 界面設計是按720*1280的，切圖上可以點9切圖做到所有手機的適配。

狀態欄、導航欄和主菜單欄，以720*1280的尺寸來設計，那麼狀態欄的高度應為50px，導航欄的高度96px，主菜單欄的高度96px，因為是開源的系統，這里的數值也只能作為參考。

Android為了區別於IOS，從4.0開始提出了一套HOLO的UI風格設計風格，鼓勵將底部的主菜單欄放到導航欄下面，從而避免點擊下方材料誤點虛擬按鍵，很多APP的新版中也採用了這一風格。

(10)app界面設計擴展閱讀：

注意事項：

1、通常情況要定位一個Icon只需給出 上/下邊距，左/右邊距，標注圖標距離只需標到可點擊范圍外

通用型顏色、字體單獨標明一份，通用型模塊只需單獨標明一份，如導航欄。

2、手機可視區域通常為寬度固定，長度超出邊界可滑動，所以標注物體寬度時可按比例說明，如果要標注內容上下居中，左右居中，或等比可不標注。

3、當交付的是一張完整圖片時，不需做機型適配，只需給高清圖(1920*1080)即可，注意進行壓縮。

4、若圖標在不同頁面重復出現，且尺寸相差不大，直接給出最大一份切圖，並在圓形圖標明尺寸，程序會根據需求縮放。

5、當背景是純色時只需給出色值，Android使用16進制色值。

參考資料來源：網路-Android

參考資料來源：網路-界面設計

參考資料來源：網路-狀態欄

參考資料來源：網路-導航欄

參考資料來源：網路-開源系統

參考資料來源：網路-切圖

參考資料來源：網路-UI設計