8個(gè) UX設(shè)計(jì)技術(shù)

2019-11-09 13:44:29

字體：大中小

供稿：網(wǎng)友

如果你認(rèn)為數(shù)字設(shè)計(jì)是由photoshop框架勾勒出的陰影部分，恐怕你錯(cuò)了。我們已經(jīng)談到了產(chǎn)品設(shè)計(jì)師的工作，從我們的設(shè)計(jì)師的作品和談話判斷，我說(shuō)，沒(méi)有成功的項(xiàng)目沒(méi)有有才干的人被聘用在設(shè)計(jì)師的位置。如果我錯(cuò)了，糾正我。專業(yè)設(shè)計(jì)接近工程，無(wú)論是一個(gè)購(gòu)物清單的MVP還是粒子砸的超級(jí)對(duì)撞機(jī)。設(shè)計(jì)不是最終產(chǎn)品，你可以看看和玩，它是一個(gè)漫長(zhǎng)的過(guò)程和負(fù)載的工作之前的最終結(jié)果。為移動(dòng)應(yīng)用創(chuàng)建UX設(shè)計(jì)，我們的目標(biāo)是提供一個(gè)成功的高質(zhì)量產(chǎn)品，以滿足客戶的要求和最終用戶的愿望。為了實(shí)現(xiàn)這一點(diǎn)，我們將所有的設(shè)計(jì)過(guò)程劃分為用戶體驗(yàn)技術(shù)。

角色

無(wú)論你要做什么，總有最困難的階段，這個(gè)階段是開(kāi)始。一旦你拿鉛筆做第一筆，它變得更容易。但是這第一沖程應(yīng)該是什么樣子？換句話說(shuō)，什么是設(shè)計(jì)過(guò)程的開(kāi)始？第一個(gè)設(shè)計(jì)應(yīng)用程序的UX技術(shù)是關(guān)于識(shí)別角色。主角，次要線索和所有那些家伙附加誰(shuí)永遠(yuǎn)不會(huì)說(shuō)話？不完全是，但這些人也很重要，無(wú)論你叫什么。

UX design techniques

角色不一定只屬于人。他們可以是產(chǎn)品的最終用戶，移動(dòng)設(shè)備，應(yīng)用程序?qū)⑴c之通信的服務(wù)器，應(yīng)用程序?qū)⒁斗诺慕M織以及在使用時(shí)與最終產(chǎn)品進(jìn)行互動(dòng)的所有其他角色。我們需要確定角色，以便了解我們計(jì)劃增長(zhǎng)產(chǎn)品的生態(tài)系統(tǒng)。一旦完成，將更容易概述用戶體驗(yàn)環(huán)境以定義應(yīng)用程序?qū)⒁獔?zhí)行的功能，以及每個(gè)角色必須完成的工作范圍。

記事板制作

現(xiàn)在它真的聽(tīng)起來(lái)像小說(shuō)。順便說(shuō)一下，你知道，在邀請(qǐng)演員和拍攝場(chǎng)景之前，電影創(chuàng)作者坐下來(lái)畫畫嗎？他們需要在視覺(jué)上理解行動(dòng)的順序，每個(gè)電影幀的內(nèi)容，最有利的時(shí)刻，弱點(diǎn)和更多。這里是Matrix的styleboard。還記得電影里的劇集嗎？

UX design techniques. Storyboarding

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

UX design techniques. Storyboarding

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

用例圖/行為圖

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

UX design techniques. Use case diagram

用戶故事/行為規(guī)范

這部分是每個(gè)用戶案例的實(shí)際書面描述，與您的產(chǎn)品的互動(dòng)可以產(chǎn)生。我們?cè)趯ｉT針對(duì)QA測(cè)試方法的文章中討論了用戶故事。所有用戶故事以“作為用戶我可以...”開(kāi)頭，然后詳細(xì)描述用戶可以使用應(yīng)用程序做什么。當(dāng)我們完整地概述了所有的用戶故事時(shí)，我們可以開(kāi)始規(guī)劃沖刺。為此，我們需要為每個(gè)用戶案例設(shè)置優(yōu)先級(jí)，并估計(jì)實(shí)現(xiàn)用戶故事中描述的功能所需的時(shí)間（以小時(shí)為單位）。最高優(yōu)先級(jí)項(xiàng)目首先進(jìn)入生產(chǎn)。沖刺通常持續(xù)一兩個(gè)星期。其范圍根據(jù)實(shí)現(xiàn)某個(gè)功能所需的小時(shí)數(shù)來(lái)計(jì)劃。通常，一個(gè)沖刺將包括在用戶故事中描述的一組情況。

用戶流

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

Square 正方形 顯示頁(yè)面（登錄屏幕，主頁(yè)，用戶個(gè)人資料）Trapeze 梯形- 用戶決定（用戶選擇，用戶過(guò)濾器，用戶類型）Diamond 鉆石 - 計(jì)算機(jī)決策（登錄無(wú)效，帳戶確定）Round 圓形的 - 錯(cuò)誤消息Blue arrow藍(lán)色箭頭 - 注冊(cè)用戶通道Red arrow 紅色箭頭 - 新用戶通道當(dāng)我們有所有的形狀和用戶案例，我們很好地把它們放在紙上，并繪制一個(gè)圖表，描述用戶與您的應(yīng)用程序的交互過(guò)程。
思維導(dǎo)圖
用戶流程有助于識(shí)別每個(gè)頁(yè)面的一組功能以及屏幕如何相交。 思維導(dǎo)圖表示產(chǎn)品的架構(gòu)。 它說(shuō)明了應(yīng)用程序的結(jié)構(gòu)和元素之間的關(guān)系。 思維導(dǎo)圖是某種沒(méi)有手機(jī)屏幕的線框。 他們的主要優(yōu)點(diǎn)是他們制作速度非常快。 有在線資源用于創(chuàng)建思維導(dǎo)圖，所以我們實(shí)際上使地圖與客戶和團(tuán)隊(duì)實(shí)時(shí)。 這將允許我們節(jié)省時(shí)間介紹更改和討論項(xiàng)目的細(xì)節(jié)，特別是考慮到遠(yuǎn)程協(xié)作的特殊性。 看下面的我們的倒計(jì)時(shí)應(yīng)用程序的心靈圖，我的一天。
線框
最后！ 線框是最終設(shè)計(jì)的骨架。 線框的意義是為每個(gè)屏幕分配功能，并顯示屏幕之間的依賴關(guān)系。 它是著色之前的最終草案。 只有當(dāng)每個(gè)線框與團(tuán)隊(duì)討論和客戶批準(zhǔn)我們開(kāi)始工作的彩色按鈕，美麗的動(dòng)畫和原始的自定義元素。
原型
你知道，在用戶界面設(shè)計(jì)傳遞給代碼之前，可以與應(yīng)用程序交互和測(cè)試嗎？ 快速原型服務(wù)，如invisionapp.com或mockup.io可以幫助您在其開(kāi)發(fā)的第一階段看到應(yīng)用程序的行動(dòng)。 我們需要做的是將線框/模型上傳到其中一個(gè)服務(wù)，動(dòng)態(tài)元素，如可點(diǎn)擊的按鈕或可滾動(dòng)列表將在每個(gè)屏幕上可用。線框化之后是模型創(chuàng)建。 我們制作模型的原型并將它們一個(gè)一個(gè)地發(fā)送給客戶。 這樣，客戶端獲得了一個(gè)看起來(lái)與未來(lái)產(chǎn)品完全相同的工作原型。 你可以已經(jīng)吹噓你的應(yīng)用程序給你的朋友，展示給投資者或測(cè)試目標(biāo)受眾獲得反饋。