設計資訊/資料:UI設計師必備技能|GET√(手機端)
「 不要因為你的屏幕空間小而認為好的交互設計規則不適用。」
我們在設計前先回顧下交互設計的五大要素:① 為目標群設計(Goal-driven Design):為你的目標用戶群做設計。像調研或者訪談形式的用戶研究,能幫助你塑造目標用戶群的人物特徵。這可以讓你為用戶目標定製app的工作流程,以滿足他們的需求。 ② 可用性(Usability):這一點看起來有些空,但你的應用程序必須是可用的。如果用戶認為你的app很複雜,那麼他們肯定不會從App Store下載。可用性會讓產品變得有用,這也是成為希望的第一步。
③ 功能與標識(Affordance & Signifiers):標識是功能的提示作用。比如,帶下劃線的藍色文本的顯示,你會知道點擊它會跳轉到別處 。使用正確的標識,讓用戶不用花費時間去考慮每個UI元素的用途。
④ 易學(Learnability):你希望用戶本能的知道如何使用的界面。這是設計模式的用場,在後文中我們將會說到。熟悉的模式能夠讓用戶很容易地適應新的app。
⑤ 反饋與響應時間(Feedback & Response Time):反饋讓用戶知道一個任務完成與否。它可以是一個很簡單的蜂鳴聲,又或是複雜一點的模態窗口。請確保您的意見是友好的,人性化,並通過尼爾森諾曼集團規定的時間內指導響應。這五大要素是你著手設計前應該考慮的基礎。
2.用戶群是誰?「屏幕尺寸不是手機設計中的唯一約束。據了解,用戶形成了界面約束的基礎。因此,在創建針對目標群app的第一步是要了解你的用戶。」下面是UX設計過程中強調的三個基本策略:
① 角色:角色是從你的目標用戶的預期行為塑造虛構人物,它將幫你決定app需要什麼來運營。② 用戶場景:場景會模擬用戶會幹什麼。隨著用戶場景,你就可以設計出最適合他們的UI以及他們的想要達成的效果是怎樣。
③ 體驗地圖:在這裡你可以了解所有的單一交互中的會出現的條件。體驗地圖繪製的每個步驟都是用戶在APP中可能經歷的。它可以幫助你了解所有步驟發生時用戶的情感和周圍的情況。
3.原型圖是必須步驟
「設計和研究工作並行。例如,您可以基於你了解到的東西快速地勾畫出的用戶流程。在定稿之前,創建一個簡單的原型。它沒有被任何幻想——你的原型可以在紙上完成,這樣可以開始了解用戶使用的內容和行為的流程。」在勾畫原型之前,用書面大綱的形式先表現可以幫助你更清楚的摸索最重要的部分——內容。在內容基礎上建立流程能讓你對頁面的總數有一個更精確的評估。
接下來,你可以為app每一頁流程都繪製一張草圖。然後將紙上的草圖剪出來形成紙上原型,或用工具(例如:UXPin)生成數字原型。
在這一過程中,大綱可以幫助您快速了解不同頁面的流程;草圖將APP的布局和結構的詳細信息融入流程中;最後,快速原型可以幫助你測試這些用戶的想法。
4.熟悉的模式用起來才方便
「手機端設計會圍繞著許多設備具體的細微差別,如拇指的位置和方位和姿勢。看一些流行的界面設計並且學習一些常見的移動端界面模式,熟悉的模式讓你為創建一個「有家的感覺」的用戶界面。」我不建議你照搬別人的設計,使用常見UI模式更像是可用性的基礎,然後再結合你自己的創造力。這樣你會確保你的app的設計不僅符合用戶的期望而且也不會感到無聊。
有兩種常見的交互設計模式,我們可以看一下:
① 手勢:觸摸設備的定義由手勢決定。觸摸,滑動,雙擊,捏和縮放正在成為用戶的第二自然反應。
② 動畫:加入動作能使用戶專註於用戶界面。元素消失與元素滑出的視線也是有差的,前者是缺失;後者是之後還可以供用戶使用。當動畫與手勢相結合,又有了更深度的體驗。
手機的交互模式更有助於選取通用界面元素的布局。例如,導航按鈕在屏幕的底部比在頂部更方便用戶用拇指點擊。Yelp app是一個很直觀的移動交互設計的例子。這款應用程序非常簡潔,美觀,按鍵大,很清楚得表達他的目的。所有按鈕很清晰,易於用戶理解。而且Yelp使用一些常見的移動用戶界面模式,如你在很多應用的看到的底部的工具欄的模式。
說到文字我們來分享一些技巧:
① 積極的短語標籤讓用戶有慾望點擊。
② 重要的話必須先出現。移動端的用戶容易急躁,所以用「全名」而不是「名稱(全稱)」。
③ 措辭必須一致,並在每屏的風格也要差不多。
檢查出庫capptivate用戶界面,並使用您的介面優秀的界面示例,將所有的手勢,動畫,和移動設計文本的細微差別。找一些好的界面模板看一下它的手勢、動畫、移動文本的細節差別,多做一些搜集,選取合適的用在你的設計中。
5.要考慮到手指粗的用戶
「手指比滑鼠下的像素要厚得多,所以你要注意手指友好的設計。具體來說,給用戶指尖留有足夠的空間。如果你的按鈕太小或太緊密,用戶無法準確(會增加挫折而遺棄)挖掘他們。」分享幾個按鈕和其他觸摸設計的技巧:①我們拿手機的方式不同。大概有三種方式拿的電話:一個拇指/一隻手,兩隻手/一位,兩隻手/兩個大拇指。而且也有不同的方式來拿平板電腦,但用戶大多是按住一側片。
②我們的手指都很胖, OK,這不是真的: 手指約有45-57像素寬,這是比大多數推薦觸摸尺寸都大。例如,蘋果公司建議約44像素的正方形目標。
44像素的準則也並不總是如此。你想設計成多大事你的事,不過,你應該考慮人的手指及他們如何與app進行交互來設計。
6.漸變和陰影依然存在
「扁平化是現今的設計趨勢,但是,這並不意味著陰影和漸變都沒了。他們已經又慢慢回到他們的設計方式。可以看看谷歌的Material Design,了解他們是如何做一個強勢復出。」當設計按鈕,切換等視覺效果,你必須考慮使用陰影。正如我們看臉上五官下的小陰影,UI元素下有會有陰影。」陰影,通過擴展梯度,使UI設計更自然的呈現給用戶。您可以使用陰影和漸變創建3D按鈕和輸入形式框,使元素出現嵌入和擴展的效果。
我們來看下相關的元素
① 輸入欄位
② 按鈕觸動
③ 滑塊軌道
④ 未選中的單選按鈕
⑤ 複選框
外顯元素包括:
① 未按下按鈕
② 滑塊按鈕
③ 下拉控制項
④ 選擇單選按鈕
⑤ 彈出窗口
看過扁平化設計趨勢的現在與未來,使用半扁平化設計解決嵌入和外顯元素會更為安全。
以上是小編跟大家分享的幾點UI設計小知識,身為設計師的你,新技能Get到了么?也希望日後大家能多多補充自己的思維模式和設計方法的相關知識。
推薦閱讀:
※偉大產品背後的設計原則
※設計做得「奇怪」究竟是什麼意思?
※除了 Photoshop,還有哪些專業強大的圖像處理軟體?
※存在不能被PS的圖片嗎?
※C語言大型項目中那些結構體是如何定下來,操作系統里有些結構體特別複雜,好多指針指向鏈表,他們如何設計?