手機交互界面策劃書

⑴ 手機界面設計的三大原則

移動APP裡面的每一個UI界面都是這個App的門面，尤其是主界面，看上去干凈整潔清爽宜人容易操作，那麼你的App就成功了一半。這也反映出了你這個開發團隊的基本審美素質和設計理念。

圖片

我們都知道，設計一套完整的APP UI界面其實是比較復雜的，從需求分析到市場定位，從草稿到擬方案，從創意元素的組合到想法沉澱，從設計規范到突破傳統，從紙上到電腦上，從個人到團隊，或者從團隊到個人，從素材收集到素材處理，從0思路到偶然等等，其實設計一個APP會碰到太多太多的問題，

所以要求我們移動APP設計者必須按照下面的三大准則和八項標准來設計。

【手機APPUI界面設計】三大准則：

（1）不亂用顏色。一個頁面內不要超過3種顏色

（2）不亂用大圖片當背景。你是想讓用戶看你的背景圖片呢，還是看你的內容？

（3）不亂填充內容。頁面元素如果太滿，給讀者壓抑感，無所適從。

圖片

【手機APPUI界面設計】八項交互標准：

1.色彩舒適度

一個第一眼看上去就雜七雜八色彩，或者完全沒有主次之分的簡潔，或者看上去就沒有視覺舒適度的飽和度或者明暗度不搭調的色彩，我想它已經沒法繼續長久看下去了。因為人第一眼看到的，就是一個事物的顏色，才是形狀。

2.文字的主次

任何設計作品都要傳達信息傳達思想，如果一套設計中字體亂啪啪，文字大小和文字粗細，間距行距都沒有一個「主次邏輯」，我很難挖掘到自己想要的信息，不論設計是酷炫復雜的還是簡潔清爽的，光能展現信息時遠遠不夠的，信息文字的每一個細節，都決定了一個設計要傳達的思想主次，記住，你是要引導別人去看，而不是別人引導你去設計。這世上沒有一個真正定死的文字標准，但是最基本的，至少讓別人看清你的文字是寫的什麼吧，所以，文字之間的不同色彩，也是能讓文字主次突出的方面

3.信息可讀性

有了文字基礎，處理好每個模塊的布局，色塊，插圖，背景等方面，會讓你的信息有較強的可讀性。別跟著你的愛好走：我喜歡酷炫，我喜歡簡潔，我喜歡優雅，我喜歡二貨。把設計作品中你最想傳達的信息傳達出去，就算某些信息被別人忽略了，你依然是成功的。如果用戶連看都不想看，連最基本的信息都沒法傳達，那作品的任何風格，都只是口頭吹噓。你要定好你的目標用戶，你想吃遍全中國乃至全世界，全行業？除非，沒有除非了。

4.UI識別性

這一點在圖標上味道非常濃，不論你這一點在圖標上味道非常濃，不論你設計的是扁平化還是擬物化還是梵高風格，不一定要3秒看出圖標的意思，也要讓人欣賞這個圖標美感的同時，大概「心裡知道」，這個圖標要傳達個什麼。一個網站banner的設計，一個頁面的導航設計，都要考慮到識別性，你想傳達這個圖像的什麼內涵？你這個圖形的意圖是什麼？都是設計者需要考慮的。

圖片

5.交互性與易用性

上面的工作都做得差不多了，剩下的就是使用了。不論是手機主題還是網站設計還是APP還是游戲，要讓別人快速上手，能玩，能用，甚至用的簡單，玩的簡單，就算你採用銀河系都沒有的酷炫交互，或者採用地球上已經瀕臨滅絕的土逼設計，達到方便使用的優良品質，你的作品再牛逼到沒法看，也有牛逼的地方能看。

6.思想，生活的傳達

作品是什麼樣，一般能從另一個層面看出一些設計師對生活對工作對感情的態度和狀態，所以別小看一個作品的力量，它可能就是傳達你自己真實內心的一個媒介，可能你並未發現，但是旁觀者已經發現你了。

所以說，融入生活得設計是比較難的，同時，也是最容易的，你是否把你最粗心最讓人厭倦的一面暴露到設計作品中？是否把你最細致入微最耐人尋味的一面傳達到用戶心裡？一張圖就可以看出（當然這不代表全部啊，某些設計師的作品看幾天你也看不出他是什麼人過著什麼生活的）

7.微小的細節和微小的創意

別說這個東西就是你創造的，因為上帝比你創造的還早。UI設計中一根線，一像素，色彩飽和度的細微差別，一個小漸變，一個字體的選擇，畫布的大小，用筆的粗細，這些小細節，雖然不是人人都能說得出，但是能第一眼「看在心裡，感覺到骨子裡」，所以就算不說，細節也是能讓任何人第一時間感覺到的，別忽視每一個小細節，它說不定就是你成功的堡壘，也是一有機會就讓你失敗的利箭。

細節中，你就能誕生一些微小的創意，小創意創造大創意，沒有細節，何談創意？那就只是紙上談兵，口說無憑。

8.生活中表現手法的引用

一個簡單的視差，一個簡單的墜落，一個簡單的玻璃破碎，一個簡單的樹葉飄落，一張紙簡單的角度擺設，一盆植物簡單的遠近拍攝，這些東西，都能創造你無窮的表現手法，當然，這也是比較難的，能將生活融入設計，是需要積攢的，不是一兩天能體會到的。

⑵ 手機界面設計的主要內容

自然的人機交互方式向三維、多通道交互的方向發展，其設計原則是發掘用戶在人機交互方面的不同需求，注重人的因素，以達到讓用戶享受人機交流的愉悅體驗。手機交互設計將不同的交互體驗進行綜合，給智能手機的發展帶來轉變。 1、需求講解
通過整理需求階段的輸出物向開發、測試、UI等進行講解，使產品相關人員對產品的需求有一個清晰的理解。需求講解會進行產品定位和方向的介紹與討論，並對一些細節展開具體實現的研究分析。
2、原型設計
原型演示僅僅只是產品設計師表現想法的手段，但對模擬用戶真實體驗與產品可用性測試具有非常重要的作用。在原型中修改一些重要的的交互行為或布局等所花費時間成本較少，通常一個人就能對原型進行構建和維護，不會打斷其他進度。原型設計能夠在表現層將設計合成一個邏輯整體，能展現出未來交互的軟體藍圖、功能和效果，獲得較真實的感受，通過設計團隊的不斷討論修改的基礎上完善未來的設計思路。FaceUI就是這樣深度了解用戶需求後，使用Axure、Visio等工具形成交互文檔與客戶溝通，以確保之後的設計稿引導出良好的用戶體驗。
3、可用性測試
以用戶為中心的設計注重用戶體驗，因此可用性測試就變得十分重要。可用性測試主要目的是：1.保證對用戶體驗有正確的預估；2.認識用戶的真實期望和目的；3.在功能核心還能夠以低廉成本加以修改的時候對設計進行修正；4.保證功能核心同人機界面之間的協調工作，減少BUG。在設計—測試—修改這個反復循環的流程中，可用性測試及時為該循環提供了可量化的指標。 一款手機應用或系統首先是通過界面將整體性格傳遞給用戶，體現了界面上風格營造的氛圍，屬於產品的一種性格。視覺設計的姿態決定了用戶對產品的觀點、興趣，乃至後面的使用情況。手機界面的視覺設計可以幫助產品的感性部分找到更多的共性，或者規避一些用戶的可能抵觸點。
1、風格確定
根據界面的總體風格的策劃思路，結合界面其他元素的需要，對手機界面的整體風格進行考慮，以保證圖標和整體效果的融合。風格鮮明的設計是手機界面設計的重要工作。目前，無論是引領風尚的iphone，還是市場新寵samsung，都推崇極簡扁平化風格。
2、圖標設計
圖標功能：在圖形設計之前，圖標非常重要，圖標的功能是我們進行圖標造型設計的標准和依託。設計圖標的目的是實用和美觀，同時要考慮圖標的隱喻性，它代表的意思必須是用戶可知的、熟知的。
圖標造型：圖標一般先用illustrator進行繪制，然後photoshop做圖標設計的後期效果處理。所有界面上同級、同類的圖標要保證表現形式的統一，避免用戶視覺上的紊亂。
3、色彩調配
由於手機本身的限制，在色彩的還原程度上有一定限制，因此在選用色彩時要根據使用的屏幕進行調節，方法就是將設計好的效果圖導入相應的手機中，用該手機自帶的圖片瀏覽軟體進行全屏效果查看或者請求開發人員幫助。

⑶ （轉）設計一個語音交互界面(Voice User Interface)

此文為Medium上的一篇文章，搬運過來供自己和大家學習下。原文鏈接

https://medium.com/@xuuuwj/%E8%AE%BE%E8%AE%A1%E4%B8%80%E4%B8%AA%E8%AF%AD%E9%9F%B3%E4%BA%A4%E4%BA%92%E7%95%8C%E9%9D%A2-voice-user-interface-1-6364d4529a28

去年11月第一次接觸VUI Design以來，已有三個多月，期間憑著網上的資料(主要是google designguideline\eros.com\設計師手記\論文)以及自己的UX知識，我嘗試設計了三個項目： 一個買書的skill 、一款智能音箱語音交互游戲、 一個關於中國電信100M寬頻業務的微信咨 詢機器人 ，前兩個項目做到原型為止，最後一個已經在微信公眾號後台實現。但這三個項目的重點都被放在conversation design上，並不能算完整意義上的VUI。

本月剛剛讀完  Cathy Pearl 的《語音用戶界面設計》(《Designing Voice User Interface》) 和《Voice User Interface Design》(By Michael H. Cohen, James P. Giangola, Jennifer Balogh)，書中完整地討論了VUI設計的基本原則、重要的技術模塊以及用戶測試等問題，幫助勾畫出了一張比較完整的VUI Design全景圖。

在接下來的文章中，我會嘗試用一個happy path串連起由0到1設計一個語音交互界面的過程，希望能定義好每個小框架中的設計問題，然後把它們變作一種肌肉記憶。

By the way， 因為說話這件事情太本能了，所以我覺得設計VUI困難的一點在於怎樣從用戶思維中跳出來，讓自己重新回到設計師的角色上：）

語音界面的優勢主要體現在三個方面：一是速度，包括輸入更方便、入口更淺、學習負擔更小等；二是共時，比如允許多任務同時進行；三是探索性，更能激發用戶的好奇心，提升用戶體驗。不過同時，也不要忘記語音交流是非常受場景、技術及用戶習慣限制的一件事。

可以參考 Google-fit-quiz 里的問題，來驗證VUI究竟是不是你的最佳選擇。

在回答之前，我們需要先了解：1.用戶進行語音交互的方式有哪些，2.VUI系統內部是如何運作的。

The Nielson Norman Group 將語音交互總結為以下屏幕優先、純語音和語音優先三種模式：

📱 Screen-first Interaction（屏幕優先）:  Here, we start with an application designed primarily for screen, and voice controls are added afterwards to enhance the experience.（設計一個以屏幕顯示為主的App, 為了提升用戶體驗，會加一些語音元素）

🗣  Voice-only Interaction（只有語音交互）:  Here there is no screen at all, and input and output is based on sound, such as a smart speaker.（VUI設備沒有屏幕，輸入和輸出都要聲音，比如智能揚聲器）

💬 Voice-first Interaction（語音優先）:  This is where an app designed primarily for voice is enhanced through the addition of a screen to output information.（以語音為主要交互方式的App，輸出信息在屏幕上顯示，通過這種方式提升App體驗）

屏幕優先 的情況下，最典型的代表就是手機語音助手，用戶不僅可以通過語音，還可以通過鍵入、手勢來進行操作，系統回復的內容也包含了語音、文本、圖片、列表、鏈接等等。

純語音交互 的代表之一是智能音箱，用戶通過「喚醒」詞，比如「 Alexa」，來開啟VUI交互；另一個代表是電話客服，也就是互動式語音應答(Interactive Voice Response, IVR)，它可以通過電話線路理解人們的請求並指引用戶完成相應的任務，比如預定機票、查詢話費等。

可以把對話系統看作人機翻譯機，接收人類的自然語言並把它翻譯成計算機能懂的結構化語言，以便進行信息匹配與加工，最終再以自然語言的形式反饋給說話者，完成一次「溝通」。「溝通」的本質是通過對最優解的一步步預測，以生成一個匹配概率盡可能高的反饋，需要計算能力、演算法與數據的背後支持。

具體情況如下圖所示：

當用戶對系統講話(utterance)，系統會首先通過 語音識別(ASR) ①接收並解析語音，識別器可以提供多個可能的結果，即N-best list，從中為接收到的語音匹配最相似的詞串文本(recognition hypothesis)，然後反饋給下一個自然 語言理解(NLU) ②模塊。

理解自然語言，即系統通過對詞法、句法、語義的分析，識別(identify)用戶的意圖(intent)或者用戶言語所涉及的領域(domain)、實體(entities)，生成一個結構化的 語義表示*， 包括語言類型(陳述需求，詢問屬性，否定，選擇疑問，等等)和條件信息(有什麼條件、值是多少)。比如，「幫我查深圳的天氣」這句話對應的語義表示為「inform(occasion=天氣，location=深圳)」，其中「inform」代表「陳述需求」，括弧裡面的內容我們稱之為slot-value pair。關於計算機是如何理解自然語言的，可以點擊 這里 詳細了解。

語義表示生成之後被轉交給 對話管理器(DM) ③，由對話管理器來決定答復給用戶什麼以及怎樣答復。

對話管理器是對話系統中很關鍵的一個模塊，連結著一個或多個 知識庫(Knowledge Base, KB) ④。通常包括：a.對話狀態跟蹤(dialogue state tracking)，比如追蹤執行用戶意圖所需的信息是否完整；b.對話策略(dialogue policy)，即根據當前的狀態 決策 下一步應該採取的最優動作，比如，是直接調用知識庫(knowledge base)內容提供結果、詢問特定限制條件、澄清或確認需求、還是開啟相關的某個軟體呢。

不同的對話系統，goal-driven system(比如任務型、問答型)和open-domain system(比如閑聊型)，對話管理器的任務、知識庫內容也不同。

任務型對話的場景相對復雜，通常會與用戶進行多倫對話，需要參數化請求並通過slots filling的形式持續跟蹤對話，直到識別出用戶意圖、特徵詞、slot-value pairs，即系系統要執行的動作的類型和操作參數。

問答型則不需要考慮復雜的對話邏輯，通常一輪對話就可以解決，重點在於語義解析與實體匹配。

閑聊型包括檢索模式和生成模式，檢索式是利用網路中已有的大量對話語料來構建索引，從索引中查找可能的候選回復，而生成式則直接從大量的人人的對話中學習對話模型，然後利用對話模型「創作」回復。

對話管理器會根據當前的對話狀態生成一個預期回復(intended response)，然後進入 自然語言生成(NLG) ⑤- 文本轉語音(TTS) ⑥環節，把結構化的預期回復改造成自然語言，最終呈現給用戶。

常見的說法是「系統形象(system persona)」，相當於產品的前端，即系統通過的①語音特徵，語氣、語調、音色、節奏等。你可以選擇使用合成(synthesized)聲音，也可以選擇錄制的(recorded)聲音；

②話術，編寫問候語、特殊應答、提示語等時的用詞、長短句這些，來展現與品牌相符的性格特質，比如親切or正式，主動or順從。

一個好的system persona能夠很自然地成為你編寫對話時的參考條件：「在這種情況下，這個persona會說什麼或做什麼？」

VUI的交互方式與對話內容很難徹底分開討論，但做這種嘗試，有助於跳出用戶視角，走進「黑盒子」中。

我傾向於將「交互方式」看作《Voice User Interface Design》中所言的「High-level design」，而將「對話內容」看作「Detailed design」。

「High-level design」關心的是怎樣推動對話流暢地進行，讓用戶知曉系統的狀態、任務進度等以便操作，比如系統在聆聽、在期待收到指令、已離線等，可以理解為GUI中的彈窗、動效、視覺反饋等。

同時也為系統設計更好的規則，以便它做出更好的決策，比如在什麼情況下需要向用戶確認請求，可以理解為GUI設計中看不見的菱形判斷框。

這些問題主要涉及到以下：

①對話模式設計

A.命令-控制式(command and control)，即用戶想要說話時必須先喚醒系統，方式可以是使用喚醒詞、手勢觸摸或者按鍵。一輪對話完畢，用戶須再次喚醒系統以開啟下一輪對話。

B.對話式，即在一段封閉的對話期間，比如完成某項特定的任務時，用戶不必每一回合都喚醒系統，而是自然地進行話輪轉換，在輪到用戶說話時系統自動開啟麥克風。

C.混合式，即命控式與對話式的結合，系統向用戶提供明顯的狀態切換標識，比如使用聲音標志(earcon)以表示某個狀態的開始與結束。

②對話策略(dialog strategy)設計

包括：

A.對話框架設計，即對話組織策略

《Designing Voice User Interface》一書把對話框架分為：a.定向對話(directed dialog)，即系統主導對話，向用戶詢問非常具體的問題，以期望獲得同樣具體的答案；b.菜單層級結構(menu hierarchy)，即系統向用戶提供一系列選擇，一旦用戶完成了菜單a的選擇，系統會繼續提供菜單b，直到完成用戶的請求；c.混合推動(mixed-initiative)，即定向對話與菜單層級相混合，系統詢問用戶問題，也允許用戶通過提供額外的信息來引導對話。

B.對話修補策略

技術並不完美，識別器可能還沒有準備好接受呼叫者的話語，或者沒有接收到說話者的語音，也可能響應時間太長 。用戶也常常會突然扭轉話題，或者提供太多信息。因此在正向推動對話之外，系統也必須配備處理這些情況的策略，以減少前功盡棄的概率。

a.錯誤恢復

可能出現的錯誤有以下四種：

·未檢測到語音

·檢測到語音，但沒有識別

·正確識別語音，但無法處理

·部分語音識別錯誤

·延遲

一般有兩種方法來處理這些情況，明確地說出來，最好能增加更多的細節讓用戶明白現在的狀況，比如「抱歉，我沒聽懂，請說出您所在的城市和區域名稱」，或者什麼也不做。如何選擇要取決於VUI系統的交互模式與用戶場景。

b.萬能指令

比如「幫助」、「停止」、「請重復一遍」、「退出」等等。設計時不僅要考慮用戶可能的需要，也要考慮用戶會怎樣表達這些需要。

③條件閾值(threshold)設計

每個應用程序都會定義系統能承受的最大錯誤，對話系統也不例外，尤其是上文對交互流程的描述也向我們清晰地展示了，從用戶、到技術模塊、再到數據資源，VUI的運行充滿了不確定性。

《Designing Voice User Interface》 一書建議我們考慮設置三種閾值：單個對話狀態中的最大連續錯誤數（特定於狀態的錯誤計數），全局計算的最大錯誤數，以及最大錯誤確認數。

牢記這一點便很容易理解Detailed design需要做什麼，即深入到單條對話中，詳細設計對話流程、輔助提示、以及異常情況處理方案。包括：

①對話設計

設計對話流程很像寫劇本，即什麼樣的角色在什麼情況下應該說什麼話，不同之處在於對話系統的情節和部分角色是寫定的。

各大平台上，Google、Amazon、Microsoft，都有對話設計的相關指導，可以通過 這篇匯總文章 來進一步了解。

②提示列表(prompt lists)

回想一下，人與人之間的溝通也要建立在共同知識的基礎上，與機器對話也是一樣。讓用戶了解系統能做什麼、不能做什麼、怎麼做是對的等等，才能夠實現高效率的對話。

這一點可以通過設計提示列表(prompt lists)來輔助實現，提示類型包括：

A.初始提示，

B.錯誤提示,

C.幫助提示，

D.特殊應答等等

提示的形式有多種，語音、文本、圖像，甚至聲音，都可以。

比如圖中Google assistant採用帶有文字的按鈕來告訴我它能識別屏幕上的內容，而我只需點擊或者說出指令即可；右邊的兩張圖里，Google通過[視覺元素變換+「進入對話」「離開對話」的文字提示+音效(earcon)]來隱喻游戲的開始與結束。

Google在designguideline for Google assistant里總結了 他們運用在提示語(prompt)中的不同元素(types of conversational components) ，是一份非常好的參考。

設計過程其實與一般產品並無大異，需要考慮：

1). 用戶研究結果。 包括用例、使用場景 、用戶語言模式與心理模式等。可以參考博主@Lu的設計手記 《語音理財案例分析》 。

2). 業務場景與目標。 主要是據此確定功能列表、功能優先順序、交互方式等。推薦網路AI社區的 《酒店語音助手實例教程》 。

特殊的是，人工智慧產品的形態多種多樣，設計師必須對於產品所依附的硬體設備、產品背後的數據與技術支持有所了解，以確定產品邊界、發現設計機會、持續優化用戶體驗。因此也需要考慮：

3). 技術與硬體基礎。

比如設備聯網程度，ASR引擎是否允許你設置N-best列表、自定義語音終止超時的時長，系統的負載量等。

4). 數據資源。

比如當前資源是否能滿足該功能，哪些數據會影響系統響應時間等。

人們往往通過語音識別准確度來評估應用程序的運行效果，這也許是最糟糕的度量方式。一個應用程序能達到90%的識別准確度，同時自動實現85%的業務呼叫；另一個應用程序達到97%的識別准確度，且自動實現40%的業務呼叫，前者就一定比後者更差或更好嗎？

——《如何構建語音識別應用》( Bruce Balentine, David Morgen)

評估涉及到三個問題：

1.如何定義成功

需要與開發人員、客戶共同完成，以方便確定哪些狀態是可以衡量的，哪些不可以。盡可能將成功狀態具體化、數字化。

以下使一些成功標準的示例：

·60%想要預定酒店的用戶最終完成了預定。

·85%的用戶在1個月內至少完成了20天的每日健康記錄。

·播放歌曲的錯誤率低於15%。

——《語音用戶界面設計》Cathy Pearl

2.可以通過什麼來衡量

A.任務完成率

B.用戶(在何處)(因為什麼)流失率

C.使用時長

D.語音打斷情況

E.高頻異常情況

……

*如果不思考原因，以上所有衡量結果都不可用

3.如何獲得衡量數據

A.在早期建立記錄日誌

B.轉錄用戶呼叫記錄

……

參考資料：

《語音用戶界面設計》Cathy Pearl

《Voice User Interface Design》Michael H. Cohen, James P. Giangola, Jennifer Balogh

網路AI社區

Google Design Guideline

Cortana Dev Center

Nielsen Norman Group

https://voiceprinciples.com/

《周耀明：自然語言對話引擎》

機器之心

⑷ APP界面設計思路是怎樣的

注重人機交互

人在操作手機時，主要以人的意識為主體，手機起到輔助作用。設計師應考慮到人與手機的各自特點，使得兩者之間相互協調，從而使工作條件達到最優。在使用手機的過程中應盡量減少人的計算和記憶負擔，從而有效地提高對手機的使用效率。

顏色搭配方案

色彩是APP界面設計中的重中之重，這關乎是否能夠正確表現出產品氣質和定位。主色決定了手機APP界面的整體設計風格，這個主色代表了產品的文化方向，同時也向用戶傳達了產品的情感。

在設計線框圖之前，研發團隊的每個人就應明確產品的定位，提煉出最貼切產品的主色。許多手機APP界面的主色都是選擇了此款APP應用圖標的主色，在不同界面中主色的面積會發生大小變化，可能會有同色系漸變界面，也可能出現同色的系功能圖標，但主色的視覺效果依然是佔主導地位的。

界面設計原則

①保證功能性和實用性。我們在對手機APP 界面進行設計時，需要考慮APP本身的使用特點，保證大多數用戶都能獲得使用體驗，保證APP功能的合理性，這樣的界面會使得用戶操作更加方便流暢，也能相應地減少手機的運算負擔。

②內涵豐富，寓意明確。設計時應在有限的二維空間中調整圖形、文字、按鍵、符號等元素的位置關系和比例大小，增加對界面內容表達的准確性和界面操控的靈活性。

③圖形簡潔，易識別。設計師應考慮界面中的點、線、面的構成，界面既要做到簡潔並具有概括性，使用戶能更容易理解和接受;又要做到內容豐富，不讓人感覺單調乏味。

以上就是APP界面設計思路分享，與傳統PC桌面不同，手機屏幕的尺寸更加小巧操作，方式也已觸控為主，APP界面設計不但要保證APP功能的完整性和合理性，又要保證APP的功能性和實用性，在保證其擁有流暢的操作感受的同時，滿足人們的審美需求。

⑸ 策劃007-App界面交互設計規范

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

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

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

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

推薦使用mac矢量設計工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作為標准尺寸設計。在界面設計完成後可以做相應的微調導出適用ios和安卓尺寸的稿子。這里可以首先統一設計稿輸出規范：

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

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

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

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

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

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

五、彈層規范

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

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

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

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

頁面載入失敗、頁面為空可以統一規范為NPC、文案、按鈕。要注意根據不同的場景顯示不同的NPC和文案。

......

...

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

⑹ 以「吃雞」手游為例，講解如何進行游戲交互界面設計

本文首發於騰訊開發者平台（GAD）： http://gad.qq.com/article/detail/37659

我們使用以下流程，設計一款游戲的交互界面：

游戲界面不同於應用，同屏的元素特別多，我之前的文章里介紹到，可以用「分組」、「相關元素貼近」的方式，將繁多的元素整合，提高界面的可讀性。

以上我們採用的是「平面」的組織方法，還有一種「立體」的組織方法，讓我們安排和設計界面時更有條理，還不容易遺漏需求。

「吃雞」手游界面，我們將其分成了以下層級，大家也可以按照喜好安排界面UI的分組：

排序是以「從底層到高層」的方式，例如第1層是放在最下面，其次是第2層，當層級之間的元素有重疊時，高層的元素遮擋低層的元素。

整理好了縱向的層級，我們就可以開始平面的規劃。

這里，我就先以豬場的《終結者》為例，看看如何一步步地規劃。

顯而易見，紅色熱區顏色，越深越容易點擊，適合放置最重要的操作。
根據這個原理，我們將需要放置的元素一個個地置入界面，從功能區域，然後再一步步細化。

市面上大部分射擊手游基本都採用了這個設計，這個習慣也是從游戲機手柄上沿襲而來的。
此外，屏幕的兩個牛角（左上角和右上角）也是比較可以舒服點擊的區域。但是，「牛角區」適合「快速響應」，不太適合「精細點擊」，如果此處同時存在2個或2個以上不同觸控區域的功能，就會造成一些麻煩，下文也會介紹到。

除了移動和射擊，但還有很多次級操作（例如：換彈葯、調整身姿、狙擊開鏡等），作為重要的操作組成部分，要進入這兩個區分「分一杯羹」。所以，我們為此特別劃分了幾個「特殊功能區」。另外，HP的顯示
從設計的角度來看，不應該在此處置入過多細小的功能按鈕，但這兩塊地方是手機上唯一的可以進行快速且精細點擊的區域，這也是一種折中和妥協。

到這一步，我們已經完成了界面上幾乎所有可以點擊區域的規劃了，其他位置都不太適合加入需要手指點擊的功能或按鈕了。

不同的場景下，顯示的操作按鈕也不同，有以下幾個場景：

具體的細化在下文正式開始繪制原型圖時介紹。

除了「操作」以外，顯示的「信息」也很重要。
第2層特效層、第3層HUB層、第5層輔助信息層，這三層共同承擔展示信息的任務，通過多種樣式的反饋，可以讓玩家快速了解當前游戲情況，得到很多游戲層無法獲得的信息。

首先我們來看第5層輔助信息層，包含的內容有：

準星用於調整行動方向、觀察周圍和射擊瞄準，非常重要，一般放置在界面正中心。
另外，幾個需要操作時間的使用狀態，也放在這個位置：

此外，輔助信息層里，還有一些文字的提示，如下圖：

這兩個層級是「附著」在游戲層上的，如果說游戲層是「真實」世界的話，這兩個層級就是真實世界的抽象延伸，用於輔助我們獲取由於感官局限（手機）而不能獲取的信息。

有下列幾個二級菜單：

游戲層：純游戲畫面，裝備體現在人物模型上。

系統UI層：非游戲部分的UI，大部分游戲通用。

至此，幾個層級的各自需求已經整理好了，就可以開始繪制正式的原型圖繪圖工作。

縷清了界面的層級，我們的原型繪制工作也會游刃有餘。
建議大家在繪制的時候，採用「場景導入」的方法，就是假設實際在什麼樣的游戲環境下，相應的按鈕應該如何排放。

「吃雞」的大致游戲脈絡為：

主要的核心是「生存」，為了生存，我們可以選擇武裝自己（搜房舔屍，獲得更好的裝備、充足補給）、殺人（觀察、射擊）、躲避殺戮（隱蔽、逃跑）、躲避毒圈（找圈、找掩體、開車、疾奔等）。

hit and run，打和跑。我們來看要如何實現打和跑：

控制視角區域，用於控制射擊的準星的X軸、Y軸移動，人物的身位轉向綁定準星的X軸。

其實界面的左右控制的不是同一個平面，如下圖：

以上帝視角俯視著看，我們就能知道人物是如何「走」的：

向左、向右、向後分別執行左右平移、後退操作，但無法切換成跑步。
當觸控區域在上圖黃色范圍內，進行前進動作（或側前），中心圓點超過虛線范圍後，可以變為跑步姿態。

加入了切換跳、蹲、趴三個動作，並在左邊額外增加了一個射擊按鈕。

早期版本的跳、蹲、趴是一摞放在右邊的，看起來很規整。但實際上，我們疊加上紅色熱區會發現，「趴」按鈕所在的區域已經泛白，說明此按鈕不是這么好點擊了。所幸後面的及時修復了這個問題，及時調整了「趴」的位置。

由於射擊按鈕和控制視角區域重合，右手大拇指只有一根，那就無法像滑鼠一樣，無法實現精確定位的同時開槍射擊了，這也是目前手游吃雞最為被詬病的地方。

目前手機FPS游戲有下面幾種操作方式：

這種方法，左手不用承擔任何射擊任務，可以自由行動；右手需要承擔定位、射擊兩項任務。這也是PC的經典FPS操作方式，左手鍵盤右手滑鼠，可以完全勝任。但是在手機上，右手需要多次的定位-射擊-再定位-再射擊，不甚其煩。

左手保持不變，右手變成了「射擊同時定位」。這種方法也叫「追射」，準星咬著目標不放，優點是身體移動的同時可保持火力持續，反應速度快、靈活。

缺點也一樣明顯，「水龍頭打開了就難關了」。AK等後坐力強的槍械，前幾發子彈準度極高，但持續連射後彈道就飄忽不定，一般高手是採用連射3-4發，停片刻，再連射……但問題是：停頓的片刻間，松開手指後，射擊按鈕已經彈回原來位置，手指需要再次「尋找」射擊按鈕的位置，並再次定位，這片刻時間極其關鍵；同時，在高壓力的對抗下，失誤率提高，甚至會出現多次點不到射擊按鈕的情況，後果很嚴重。

相當於上一個方法——定位同時射擊的「威力加強版」。右手完成定位後，不用「尋找」射擊按鈕，直接按壓屏幕就可以射擊，也可以邊定位邊射擊，幾乎可以做到和滑鼠一樣快。

但就這樣也存在一個問題，按壓的力度不好把握，時常會出現不小心「走火」，或是想射擊時按得太輕了。
針對這個問題，我的想法是：

一旦3D-touch的手感被調制最優後，就完全可以去掉右手的射擊按鈕，讓手機右側變成一塊「觸控板」。

由於「吃雞」的特點，各種「伏地魔」、「橋頭收費站」、「卡毒圈」的玩法，使得「定點射擊」也有了很大的價值：

定點射擊的方式放棄了移動，將開槍的任務交給了左手（屏幕左邊的射擊按鈕），右手全力負責定位，實現「精準爆頭」、「遠距離追射」，深受廣大狙擊手的喜愛。

號稱最快的狙擊方法，按住射擊鍵不放開（開鏡）、移動手指定位，松開手指（射擊）。
速度快、定位準。但容錯低，且只能單發，適合威力大（可以一擊必殺）的狙擊武器。

為了讓大家能夠開心地在手機吃雞，大廠們使勁解數，努力提高玩家的體驗，
現在「吃雞」手游大熱之際，各大外設廠商都紛紛推出各種「吃雞專用」手柄。以個人之見：就和《王者榮耀》一樣，手游要的就是不需要任何外設，玩家寧願忍受著各種不便，也不要抱著一個累贅的手柄。

真的要有一個專用的外設，我覺得只要加一個「扳機鍵」專門用於射擊就可以了：

有了「扳機鍵」，就可以實現邊移動邊瞄準邊射擊了，雖然還是比不上手柄，但手感已經UP很多了。扳機鍵可以整合到手機殼上，又方便攜帶。

除了射擊和移動，操作區還有幾個重要的按鈕：

此次加入的按鈕較多，所以在原型圖內對按鈕加入灰度顯示其重要程度：

按鈕上還有幾個小細節，當手上持有多種類型的手雷或血包時，有一個小箭頭可以進行切換：

顯示負重程度：

分別放的是：武器管理和地圖查看。

武器管理這一塊區域按鈕太過於密集，我們來看這個區域承載的功能以及重要程度：

除了1、2兩個查看需求外，這塊區域密集了5個可點擊區域，某些按鈕還承載了2個功能（換彈和換槍），所以導致此處誤點率極高。
最主要的操作還是兩個——換槍、換彈

保證兩個核心操作的體驗，另外的功能和按鈕靠邊站（放置到更深層級或隱藏），而不是和核心功能搶位置增加誤點幾率，體驗可能會更好。

到這里，我們介紹完了操作UI層的所有界面，另外幾個層級也可以用類似的方法，一步步地拆解、分析。

本文對當前已有交互設計的點評和分析，思考不周，歡迎大家批評指正。

「吃雞」就是大廠游戲，其他小廠是雞湯都喝不上。不做「吃雞」，但研究「吃雞」卻依然有意義。

現象級游戲就是值得研究的，很多人也是由於操作等原因「看衰」手機版的吃雞。但是，「吃雞成為下一款國民級手游」的說法被越多越多人認同，我們「看」大廠們如何在如此限制多多的手機上給大家帶來良好的「吃雞體驗」，同時也可以借鑒和學習。

⑺ 手機app開發怎樣設計出簡潔實用的交互界面

簡單易用，在交互設計培訓裡面沒辦法給一個明確的公式或者結論。因為每個用戶的使用習慣都是不一樣的。對於簡單這個名詞，每個人的程度都是不一樣的。所以，在APP開發界面設計上，交互設計中只能根據大多數用戶的習慣以及設計的常理進行解釋和定義。因此，我們在UI交互設計上，想要實現用戶人認為簡單易用APP開發界面設計，就需要遵循用戶習慣和社會常理。

⑻ 如何做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界面設計作品必然是要經過不斷升級、重復迭代的。

⑼ 手機應用軟體的界面設計是什麼

1、手機應用軟體的界面設計——“高可用性”設計將擊敗“簡單”設計

智能手機用戶的數量已經擴大到一個非常邊緣的群體，而且數量非常大。它們沒有界面交互或隱喻的一般概念。如果他們盡可能直接和非破壞性地傳達信息，可用性和“簡單性”的設計沖突。

在漢堡菜單和材料設計中，生產按鈕是最大的問題。

2、手機應用軟體的界面設計——平面設計和游戲設計的靈感會影響到應用交互/內容的設計

平面2.0設計:雖然整體感覺還是“平坦”的，但是陰影、漸變和其他細節會更加豐富。

精美的插圖和圖形更為常見，它們直接影響應用程序本身的質量。

更多的字體選擇和雜志風格的排版。

3、手機應用軟體的界面設計——智能通知將成為新的“應用home”

事實證明，蘋果手錶等智能手錶的核心價值在於“通知”。通知已經成為用戶與應用程序交互最直接的方式，尤其是在每個人都擁有大量應用程序、注意力資源稀缺、啟動一款應用程序不容易(或者不方便，就像Apple Watch那樣)的情況下。

通知的形式將更“聰明”,不是小廣告推送的形式,還是以產品的形式居民,但接近“手錶”屏幕大小,隨需應變,交互和界面相對完整(甚至用手機而不是看),用戶甚至可以享受應用程序,而無需打開應用程序提供的所有功能。

環球網校小編為大家整理的《越來越多的ui設計師，開始學習手機應用軟體的界面設計要求》到這里就結束了，如果你希望能將這篇文章靈活應用，還需多加練習，如果你還想學習更多有關UI設計的技巧或知識，也可以點擊本站其他文章進行學習。