手機端用戶界面設計中你是否會遇到一些問題？手機屏幕??？用戶體驗不好？今天小編為你搜集了手機界面設計幾個需要注意的點，快來補課~

1.交互設計規(guī)則適應手機端

“ 不要因為你的屏幕空間小而認為好的交互設計規(guī)則不適用?！?br />
我們在設計前先回顧下交互設計的五大要素：

① 為目標群設計（Goal-driven Design）：為你的目標用戶群做設計。像調(diào)研或者訪談形式的用戶研究，能幫助你塑造目標用戶群的人物特征。這可以讓你為用戶目標定制app的工作流程，以滿足他們的需求。

② 可用性（Usability）：這一點看起來有些空，但你的應用程序必須是可用的。如果用戶認為你的app很復雜，那么他們肯定不會從App Store下載?？捎眯詴尞a(chǎn)品變得有用，這也是成為希望的第一步。

③ 功能與標識（Affordance & Signifiers）：標識是功能的提示作用。比如，帶下劃線的藍色文本的顯示，你會知道點擊它會跳轉(zhuǎn)到別處 。使用正確的標識，讓用戶不用花費時間去考慮每個UI元素的用途。

④ 易學（Learnability）：你希望用戶本能的知道如何使用的界面。這是設計模式的用場，在后文中我們將會說到。熟悉的模式能夠讓用戶很容易地適應新的app。

⑤ 反饋與響應時間（Feedback & Response Time）：反饋讓用戶知道一個任務完成與否。它可以是一個很簡單的蜂鳴聲，又或是復雜一點的模態(tài)窗口。請確保您的意見是友好的，人性化，并通過尼爾森諾曼集團規(guī)定的時間內(nèi)指導響應。

這五大要素是你著手設計前應該考慮的基礎。

2.用戶群是誰？

“屏幕尺寸不是手機設計中的唯一約束。據(jù)了解，用戶形成了界面約束的基礎。因此，在創(chuàng)建針對目標群app的第一步是要了解你的用戶?！?br />
下面是UX設計過程中強調(diào)的三個基本策略：

① 角色：角色是從你的目標用戶的預期行為塑造虛構(gòu)人物，它將幫你決定app需要什么來運營。

② 用戶場景：場景會模擬用戶會干什么。隨著用戶場景，你就可以設計出最適合他們的UI以及他們的想要達成的效果是怎樣。

③ 體驗地圖：在這里你可以了解所有的單一交互中的會出現(xiàn)的條件。體驗地圖繪制的每個步驟都是用戶在APP中可能經(jīng)歷的。它可以幫助你了解所有步驟發(fā)生時用戶的情感和周圍的情況。 3.原型圖是必須步驟

“設計和研究工作并行。例如，您可以基于你了解到的東西快速地勾畫出的用戶流程。在定稿之前，創(chuàng)建一個簡單的原型。它沒有被任何幻想——你的原型可以在紙上完成，這樣可以開始了解用戶使用的內(nèi)容和行為的流程?！?br />
在勾畫原型之前，用書面大綱的形式先表現(xiàn)可以幫助你更清楚的摸索最重要的部分——內(nèi)容。在內(nèi)容基礎上建立流程能讓你對頁面的總數(shù)有一個更精確的評估。

接下來，你可以為app每一頁流程都繪制一張草圖。然后將紙上的草圖剪出來形成紙上原型，或用工具（例如：UXPin）生成數(shù)字原型。

在這一過程中，大綱可以幫助您快速了解不同頁面的流程；草圖將APP的布局和結(jié)構(gòu)的詳細信息融入流程中；最后，快速原型可以幫助你測試這些用戶的想法。 4.熟悉的模式用起來才方便

“手機端設計會圍繞著許多設備具體的細微差別，如拇指的位置和方位和姿勢?？匆恍┝餍械慕缑嬖O計并且學習一些常見的移動端界面模式，熟悉的模式讓你為創(chuàng)建一個“有家的感覺”的用戶界面?！?br />
我不建議你照搬別人的設計，使用常見UI模式更像是可用性的基礎，然后再結(jié)合你自己的創(chuàng)造力。這樣你會確保你的app的設計不僅符合用戶的期望而且也不會感到無聊。

有兩種常見的交互設計模式，我們可以看一下：

① 手勢：觸摸設備的定義由手勢決定。觸摸，滑動，雙擊，捏和縮放正在成為用戶的第二自然反應。

② 動畫：加入動作能使用戶專注于用戶界面。元素消失與元素滑出的視線也是有差的，前者是缺失;后者是之后還可以供用戶使用。當動畫與手勢相結(jié)合，又有了更深度的體驗。

手機的交互模式更有助于選取通用界面元素的布局。例如，導航按鈕在屏幕的底部比在頂部更方便用戶用拇指點擊。

Yelp app是一個很直觀的移動交互設計的例子。這款應用程序非常簡潔，美觀，按鍵大，很清楚得表達他的目的。所有按鈕很清晰，易于用戶理解。而且Yelp使用一些常見的移動用戶界面模式，如你在很多應用的看到的底部的工具欄的模式。 說到文字我們來分享一些技巧：

① 積極的短語標簽讓用戶有欲望點擊。

② 重要的話必須先出現(xiàn)。移動端的用戶容易急躁，所以用“全名”而不是“名稱（全稱）”。

③ 措辭必須一致，并在每屏的風格也要差不多。

檢查出庫capptivate用戶界面，并使用您的接口優(yōu)秀的界面示例，將所有的手勢，動畫，和移動設計文本的細微差別。找一些好的界面模板看一下它的手勢、動畫、移動文本的細節(jié)差別，多做一些搜集，選取合適的用在你的設計中。

5.要考慮到手指粗的用戶

“手指比鼠標下的像素要厚得多，所以你要注意手指友好的設計。具體來說，給用戶指尖留有足夠的空間。如果你的按鈕太小或太緊密，用戶無法準確（會增加挫折而遺棄）挖掘他們?！?br />
分享幾個按鈕和其他觸摸設計的技巧：

① 我們拿手機的方式不同。大概有三種方式拿的電話：一個拇指/一只手，兩只手/一位，兩只手/兩個大拇指。而且也有不同的方式來拿平板電腦，但用戶大多是按住一側(cè)片。

② 我們的手指都很胖, OK，這不是真的: 手指約有45-57像素寬，這是比大多數(shù)推薦觸摸尺寸都大。例如，蘋果公司建議約44像素的正方形目標。

44像素的準則也并不總是如此。你想設計成多大事你的事，不過，你應該考慮人的手指及他們?nèi)绾闻capp進行交互來設計。

6.漸變和陰影依然存在

“扁平化是現(xiàn)今的設計趨勢，但是，這并不意味著陰影和漸變都沒了。他們已經(jīng)又慢慢回到他們的設計方式?？梢钥纯垂雀璧腗aterial Design，了解他們是如何做一個強勢復出。”

當設計按鈕，切換等視覺效果，你必須考慮使用陰影。正如我們看臉上五官下的小陰影，UI元素下有會有陰影?！标幱?，通過擴展梯度，使UI設計更自然的呈現(xiàn)給用戶。您可以使用陰影和漸變創(chuàng)建3D按鈕和輸入形式框，使元素出現(xiàn)嵌入和擴展的效果。 我們來看下相關的元素

嵌入式元素：

① 輸入字段

② 按鈕觸動

③ 滑塊軌道

④ 未選中的單選按鈕

⑤ 復選框

外顯元素包括：

① 未按下按鈕

② 滑塊按鈕

③ 下拉控件

④ 選擇單選按鈕

⑤ 彈出窗口

看過扁平化設計趨勢的現(xiàn)在與未來，使用半扁平化設計解決嵌入和外顯元素會更為安全。

以上是小編跟大家分享的幾點UI設計小知識，身為設計師的你，新技能Get到了么？也希望日后大家能多多補充自己的思維模式和設計方法的相關知識。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

本文題目：UI設計師必備技能|GET√（手機端）
本文鏈接：http://www.rwnh.cn/news13/326113.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、域名注冊、網(wǎng)站策劃、用戶體驗、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)