8個 UX設計技術

2019-11-09 13:44:29

字體：大中小

來源：轉載

供稿：網友

如果你認為數字設計是由photoshop框架勾勒出的陰影部分，恐怕你錯了。我們已經談到了產品設計師的工作，從我們的設計師的作品和談話判斷，我說，沒有成功的項目沒有有才干的人被聘用在設計師的位置。如果我錯了，糾正我。專業設計接近工程，無論是一個購物清單的MVP還是粒子砸的超級對撞機。設計不是最終產品，你可以看看和玩，它是一個漫長的過程和負載的工作之前的最終結果。為移動應用創建UX設計，我們的目標是提供一個成功的高質量產品，以滿足客戶的要求和最終用戶的愿望。為了實現這一點，我們將所有的設計過程劃分為用戶體驗技術。

角色

無論你要做什么，總有最困難的階段，這個階段是開始。一旦你拿鉛筆做第一筆，它變得更容易。但是這第一沖程應該是什么樣子？換句話說，什么是設計過程的開始？第一個設計應用程序的UX技術是關于識別角色。主角，次要線索和所有那些家伙附加誰永遠不會說話？不完全是，但這些人也很重要，無論你叫什么。

UX design techniques

角色不一定只屬于人。他們可以是產品的最終用戶，移動設備，應用程序將與之通信的服務器，應用程序將要投放的組織以及在使用時與最終產品進行互動的所有其他角色。我們需要確定角色，以便了解我們計劃增長產品的生態系統。一旦完成，將更容易概述用戶體驗環境以定義應用程序將要執行的功能，以及每個角色必須完成的工作范圍。

記事板制作

現在它真的聽起來像小說。順便說一下，你知道，在邀請演員和拍攝場景之前，電影創作者坐下來畫畫嗎？他們需要在視覺上理解行動的順序，每個電影幀的內容，最有利的時刻，弱點和更多。這里是Matrix的styleboard。還記得電影里的劇集嗎？

UX design techniques. Storyboarding

電影制作中使用的故事板是一個例子。但是，只要我們談論與圖形相關的設計，為什么不回顧人類文字的歷史呢？它從故事板開始 - 巖石雕刻，壁畫，在笼子墻壁上的動物和所有這一切。顯然，說明事物最好理解任何概念或想法?；氐轿覀兊臄底謺r代，我們如何在移動應用設計中使用故事板？我們可以繪制漫畫與不同的字符和情況！你認為如果情況像一天一樣清楚，并且像黑白一樣簡單，你可以跳過這一步？繼續，但是有一個很大的風險，忽略這樣一個重要的技術將不會對你的產品的成功做任何好處。常見的錯誤是認為，在一見可見的情況下，瑣碎不需要拼寫。但是，一旦你采取一個簡單的場景，用戶與您的產品互動，并將其分解為小塊，你會注意到很多你沒有注意的問題。故事板正是你需要考慮所有的細微差別，確定設計解決方案，并把它們放在首位。這一步的重點是從團隊成員和客戶那里找到我們想要的“a-Ha”時刻。想知道什么是“a-Ha”的時刻？這是啟蒙的時刻，當你得到的是什么是什么，為什么的想法。故事板幫助我們找到問題并解決它們。它可以防止將來可能出現的問題，因為后來發現它們顯然會花費你更多。我們將在設計中犯許多錯誤。完美需要錯誤。但是它們變得可見的越快，它們將被糾正得越快。美國電影導演安德魯·斯坦頓（Andrew Stanton）說：“我的策略一直是：盡可能快地錯誤。故事板幫助我們思考。它幫助我們了解現有的情景，以及測試潛在情景的假設。說明想法非常有助于他人更好地了解我們想說什么。它就像解釋在城市火車站的方向。你把它畫在一張紙上，任何隨意的路人都知道如何從他們現在的地點到他們想要的目的地。

UX design techniques. Storyboarding

設計師的主要技能不是Photoshop，而是能夠描述和描述情境或場景。你將產品的用戶分成一組不同的字符，并嘗試可能發生在特定字符的各種故事。然后，您以百分比評估情況的概率，并采取措施實現最佳的用戶體驗。

用例圖/行為圖

行為圖描述了外部用戶（演員）的視覺行為。它標識每個actor可以采取的確切操作。例如，如果我們談論圖書館，這里有兩個演員。一個是圖書館員，另一個是圖書館客戶。圖書館客戶可以搜索或借書，而圖書館員可以搜索圖書，添加圖書和刪除圖書。在我們的領域，例如賀卡應用將有兩個演員，其中一個將是一個祝賀，另一個 - 一個生日男孩。 Congratulator可以登錄Facebook，從Facebook的朋友列表中選擇一個朋友，選擇一張卡片，寫他的愿望，并發送一張卡片給生日男孩。讓我們假設，后者沒有在他的移動設備上安裝這個應用程序。他可以得到他知道的人發送的賀卡的通知，來到應用商店并安裝賀卡應用程序。一旦在那里，生日男孩可以收到卡，喜歡它，并做任何你希望他做的，以啟用與Congratulator的互動 - 發送回復，例如。看下面這個案例的行為圖。

UX design techniques. Use case diagram

用戶故事/行為規范

這部分是每個用戶案例的實際書面描述，與您的產品的互動可以產生。我們在專門針對QA測試方法的文章中討論了用戶故事。所有用戶故事以“作為用戶我可以...”開頭，然后詳細描述用戶可以使用應用程序做什么。當我們完整地概述了所有的用戶故事時，我們可以開始規劃沖刺。為此，我們需要為每個用戶案例設置優先級，并估計實現用戶故事中描述的功能所需的時間（以小時為單位）。最高優先級項目首先進入生產。沖刺通常持續一兩個星期。其范圍根據實現某個功能所需的小時數來計劃。通常，一個沖刺將包括在用戶故事中描述的一組情況。

用戶流

當我們完成用戶故事的工作后，我們可以更清楚地了解用戶與您的移動應用程序的互動。這有助于我們創建用戶行為或用戶流程圖。用戶流是所有關于幾何。我的意思是，我們需要具有一定定義的形狀，使他們參與到圖表中。讓我舉幾個例子：

Square 正方形顯示頁面（登錄屏幕，主頁，用戶個人資料）Trapeze 梯形- 用戶決定（用戶選擇，用戶過濾器，用戶類型）Diamond 鉆石 - 計算機決策（登錄無效，帳戶確定）Round 圓形的 - 錯誤消息Blue arrow藍色箭頭 - 注冊用戶通道Red arrow 紅色箭頭 - 新用戶通道當我們有所有的形狀和用戶案例，我們很好地把它們放在紙上，并繪制一個圖表，描述用戶與您的應用程序的交互過程。

UX design techniques. User-flow diagram

思維導圖

用戶流程有助于識別每個頁面的一組功能以及屏幕如何相交。思維導圖表示產品的架構。它說明了應用程序的結構和元素之間的關系。思維導圖是某種沒有手機屏幕的線框。他們的主要優點是他們制作速度非?？?。有在線資源用于創建思維導圖，所以我們實際上使地圖與客戶和團隊實時。這將允許我們節省時間介紹更改和討論項目的細節，特別是考慮到遠程協作的特殊性。看下面的我們的倒計時應用程序的心靈圖，我的一天。

Mind Map. My Day app

線框

最后！線框是最終設計的骨架。線框的意義是為每個屏幕分配功能，并顯示屏幕之間的依賴關系。它是著色之前的最終草案。只有當每個線框與團隊討論和客戶批準我們開始工作的彩色按鈕，美麗的動畫和原始的自定義元素。

Wireframes. My day app

原型

你知道，在用戶界面設計傳遞給代碼之前，可以與應用程序交互和測試嗎？快速原型服務，如invisionapp.com或mockup.io可以幫助您在其開發的第一階段看到應用程序的行動。我們需要做的是將線框/模型上傳到其中一個服務，動態元素，如可點擊的按鈕或可滾動列表將在每個屏幕上可用。線框化之后是模型創建。我們制作模型的原型并將它們一個一個地發送給客戶。這樣，客戶端獲得了一個看起來與未來產品完全相同的工作原型。你可以已經吹噓你的應用程序給你的朋友，展示給投資者或測試目標受眾獲得反饋。

Prototypes. My Day app design