移動(dòng)網(wǎng)站正在向用戶(hù)體驗(yàn)設(shè)計(jì)靠攏,并正在走向成熟

2018-03-02    分類(lèi): 用戶(hù)體驗(yàn)

移動(dòng)用戶(hù)體驗(yàn)設(shè)計(jì)正在走向成熟。一種方法來(lái)衡量,這是看在我們的處置工具。原型工具,例如Balsamiq,AXURE和Fireworks,使我們建立線(xiàn)框和點(diǎn)擊假人,幫助我們解釋有針對(duì)性的用戶(hù)體驗(yàn)??鐬g覽器框架,,如PhoneGap的,基金會(huì)Zurb和jQuery Mobile的幫助,我們能夠創(chuàng)建使用本地語(yǔ)言的Web原型:HTML,CSS和JavaScript。
為什么呢?素描案例
我們似乎比以往任何時(shí)候設(shè)計(jì)偉大的經(jīng)驗(yàn),幾乎沒(méi)有時(shí)間在一個(gè)更好的位置。然而,這些工具配有一個(gè)隱藏的成本:他們引誘我們跳過(guò)必要?jiǎng)?chuàng)造一個(gè)精心設(shè)計(jì)的產(chǎn)品 - 這是花時(shí)間去理解這個(gè)問(wèn)題,我們給出的關(guān)鍵步驟。
這就是為什么我建議開(kāi)始使用草圖來(lái)了解問(wèn)題,并想出了一個(gè)概念,在發(fā)射前你最喜歡的工具。
現(xiàn)在,你可能會(huì)想下列操作之一:
“我們有一個(gè)時(shí)間緊迫,根本沒(méi)有時(shí)間進(jìn)行涂鴉。我們需要開(kāi)始?!?br/>“設(shè)計(jì)[插入你最喜歡的工具]遠(yuǎn)遠(yuǎn)快。我需要快速得到結(jié)果?!?br/>“我們需要提出我們的[客戶(hù)或項(xiàng)目合作伙伴或同行的結(jié)果。我們不能告訴他們手繪的東西?!?br/>“對(duì)不起,但我真的不能借鑒?!?br/>我不僅聽(tīng)到這些反對(duì)前幾次,我也說(shuō),所有這些我自己。
定義存在的問(wèn)題及解決方案
寫(xiě)生使我們探索問(wèn)題的空間和定義解決方案在同一時(shí)間的空間。幀的問(wèn)題,我們目前的了解,同時(shí)也幫助我們找出可行的解決方案。
雖然我們勾畫(huà)出我們的思想,新的思路將出現(xiàn)模糊和缺乏細(xì)節(jié)草圖中培育新的想法,在這里,模糊是一件好事,因?yàn)槲覀儠?huì)自動(dòng)嘗試在我們的頭腦,以填補(bǔ)空白。這是什么使得素描“生成”:它抓住了想法,我們已經(jīng)和火花新思路。正如比爾·巴克斯頓說(shuō),在草圖的用戶(hù)體驗(yàn):
“學(xué)習(xí)在很大程度上是基于其代表性的模糊性從草圖。也就是說(shuō),他們不指定所有借給自己,并鼓勵(lì)各種不同的解釋?zhuān)蛔杂X(jué)地融入他們的創(chuàng)造者?!?br/>通過(guò)繪制不同的一個(gè)問(wèn)題的解決方案,我們可以探索他們沒(méi)有立即提交其中之一。這為我們提供了新的見(jiàn)解,并提出了新的問(wèn)題。素描本質(zhì)上是一個(gè)集思廣益。
寫(xiě)生的“成本”
以最快的方式得到的東西,我們的頭頂是抓住一枝筆和一張紙,迅速勾勒出來(lái)。試圖做同樣的,在我們最喜歡的原型開(kāi)發(fā)工具,需要更多的時(shí)間,我們要?jiǎng)?chuàng)建一個(gè)新的項(xiàng)目,決定正確的庫(kù)使用,我們的小矩形放置在畫(huà)布上,畫(huà)出連接我們的小矩形的小箭頭,重新安排一切以使它看起來(lái)不錯(cuò) - 30分鐘或更長(zhǎng)時(shí)間,突然都不見(jiàn)了。
如果我們不喜歡我們所看到的一張紙,我們可以在bin折騰它,并重新開(kāi)始。然而,使用我們的原型設(shè)計(jì)工具,使扔?xùn)|西更難,因?yàn)槲覀兊臅r(shí)間和精力花費(fèi)在創(chuàng)建-即使當(dāng)時(shí)的想法是不是一個(gè)偉大的。從頭開(kāi)始是更難。紙草圖,在另一方面,便宜和快速的。
最快的方式來(lái)捕捉和評(píng)估的概念是勾畫(huà)出來(lái)。

素描作為一種通信工具
不過(guò)穿俗話(huà)說(shuō),一張照片說(shuō)千言萬(wàn)語(yǔ)。草圖讓我們走我們的同行和利益相關(guān)者,通過(guò)我們目前了解的項(xiàng)目。我們可以用不同的視覺(jué)陳述,解釋不同方面的項(xiàng)目(在下一章中,我們將介紹最常見(jiàn)的)。在餐巾紙的背面,丹漫游說(shuō):
“圖片可以代表復(fù)雜的概念和總結(jié)廣大的信息集,很容易讓我們看到和了解的方式,他們是有用的澄清和解決各種問(wèn)題。”
我們的同事將能夠指出我們的思維過(guò)程中的差距,并討論可能的解決方案,我們的替代品。他們將最有可能了解我們的速記,可以反饋給我們的細(xì)節(jié),我們的概念。提出我們的想法給別人,也讓我們反思我們的概念,我們看到的錯(cuò)誤,并可以找到更好的替代品,只是穿行。
作為協(xié)作工具繪制草圖
素描是一個(gè)功能強(qiáng)大的工具,早在設(shè)計(jì)過(guò)程中涉及利益相關(guān)者。以下是典型的雞生蛋的問(wèn)題定義過(guò)程時(shí):利益相關(guān)者的要求制定了一套完整的解決方案之前,他們已經(jīng)看到了一些可視化表示不能,但我們的設(shè)計(jì)師都不愿意開(kāi)始工作的一個(gè)解決方案之前,我們是肯定的我們已要求是穩(wěn)定的 - 我們要避免不必要的修改,這將導(dǎo)致額外的工作。
擺脫這種困境的一種方法是在一個(gè)合作的研討會(huì),如設(shè)計(jì)工作室會(huì)話(huà)(見(jiàn)威爾·埃文斯的文章“ 設(shè)計(jì)工作室方法論介紹 “)開(kāi)始繪制草圖可能的解決方案。我們可以通過(guò)我們的概念和替代步驟一步走利益相關(guān)者,向他們解釋他們的要求對(duì)設(shè)計(jì)的影響。
素描也有一個(gè)進(jìn)入門(mén)檻低,使非設(shè)計(jì)師參加。(無(wú)論你的手筆利益相關(guān)者是個(gè)人品味和備受爭(zhēng)議的問(wèn)題,你將不得不作出自己的頭腦)。
因?yàn)椴輬D和未完成的粗糙,給人的反饋也更容易。有些人忍住,因?yàn)樗麄冋J(rèn)為所有的工作,必須有一定的進(jìn)入后,看到一個(gè)漂亮的成品前瞻性的頁(yè)面版本。高保真視覺(jué)效果也往往會(huì)分散人們的注意力 - 而不是聚焦的概念,他們都禁不住要發(fā)表評(píng)論,視覺(jué)設(shè)計(jì)或次要的細(xì)節(jié)。草圖讓他們專(zhuān)注于核心理念。
你唯一需要克服的是你不愿意給別人顯示你的糙米工作。
素描是不是繪圖
一個(gè)常見(jiàn)的誤解是草圖必須是相當(dāng)?shù)?。但交互設(shè)計(jì)是不是藝術(shù)類(lèi)草圖不需要好看,他們只需要傳達(dá)你的想法。他們應(yīng)該引發(fā)討論和產(chǎn)生的想法,他們不太可能被誣陷在墻上。只要你能夠繪制框,箭頭,圓圈和畫(huà)中人物,你是好去。正如約書(shū)亞布魯爾注意到“ 素描,速寫(xiě),素描 “:
“本草圖是不是最終目標(biāo)。拉絲工藝的最終目標(biāo)是你所學(xué)到的素描時(shí)。所以不要擔(dān)心,如果你不能寫(xiě)生?!?br/>學(xué)習(xí)如何勾畫(huà)超出了本文的范圍,但看看下面的介紹,文章和書(shū)籍來(lái)獲得基礎(chǔ)知識(shí):

“ '藝術(shù)'寫(xiě)生接口 “(幻燈片),杰森梅蘇特和薩姆·史密斯
“ 素描101 “(幻燈片),杰克遜福克斯
“ 凌亂的藝術(shù)UX素描,“Peiter別克
素描用戶(hù)體驗(yàn):工作簿,索爾·格林伯格,Sheelagh卡彭代爾,尼古拉·馬夸特,比爾·巴克斯頓(摩根考夫曼:2011)

如何畫(huà)出
現(xiàn)在,我有希望說(shuō)服你,素描應(yīng)該是您的工作流程,讓我們來(lái)談?wù)勅绾喂蠢找粋€(gè)移動(dòng)項(xiàng)目的一部分。
發(fā)散速寫(xiě)
在開(kāi)始的時(shí)候,你會(huì)想為您的移動(dòng)應(yīng)用程序或網(wǎng)站,以捕捉不同的想法。開(kāi)始繪制不同版本的一個(gè)鍵屏幕或部分。你的目標(biāo)是雙重的:產(chǎn)生了很多不同的想法,并探討和評(píng)價(jià)他們 - 在相同的時(shí)間。更多的想法,你上來(lái),你將有更多的選擇,選擇稍后。這個(gè)過(guò)程通常被稱(chēng)為“發(fā)散寫(xiě)生。”
這種類(lèi)型的素描 à 有用的工具是一個(gè)多頁(yè)的模板。它提供了足夠的空間來(lái)勾畫(huà)在單頁(yè)上6個(gè)不同的版本,它提供了一些指導(dǎo),可用的屏幕空間。并排顯示不同的想法,這讓他們以后更容易比較和討論。
很多模板可在網(wǎng)上(我使用Erik Loehfelm的最常見(jiàn)的)。挑選一個(gè)你喜歡的。
線(xiàn)框用于全球?qū)Ш阶兎N。(大版)

上面的截圖顯示了6個(gè)不同的想法為一個(gè)應(yīng)用程序的主菜單(,加上生動(dòng)地證明了我的草圖不漂亮)。我不經(jīng)常拿出六個(gè)版本(我想告訴自己,我是一個(gè)結(jié)構(gòu)的第一人),但我會(huì)盡量去創(chuàng)造一個(gè)鍵屏幕至少有三個(gè)變種。因?yàn)檫@是頭腦風(fēng)暴,你會(huì)想了很多的選擇在后面討論,數(shù)量是你的朋友在這里。
如果你恰巧是做空的思路,瀏覽一些移動(dòng)用戶(hù)界面的靈感畫(huà)廊(如風(fēng)格的UI,Pttrns,可愛(ài)的用戶(hù)界面和UI游行)。他們展示的主題和功能(例如,主菜單,聊天窗口)分組的解決方案。包括你喜歡的東西在你的草圖,并把它們與自己的想法。
字幕每個(gè)草圖的習(xí)慣。這將使它更容易區(qū)分它們,并參考他們。我加注釋和說(shuō)明,解釋的草圖和他們背后的思維過(guò)程(如優(yōu)勢(shì),劣勢(shì),權(quán)衡相比其他概念,問(wèn)題,新功能等)。標(biāo)簽和約會(huì)床單也是一個(gè)好的做法。
收斂速寫(xiě)
一旦你已經(jīng)勾勒出了多個(gè)版本的屏幕,挑一個(gè)最好的解決問(wèn)題。不幸的是,一個(gè)單一的草圖很少會(huì)檢查所有的箱子。在大多數(shù)情況下,你將不得不想法或部分想法結(jié)合成一個(gè)單一的獲獎(jiǎng)概念。要做到這一點(diǎn),你將需要進(jìn)行更深入的探索,在單頁(yè)上做更詳細(xì)的草圖。使用白色空間注解。記下所有的問(wèn)題,新的思路,重要的或不清楚的地區(qū),活動(dòng)討論。這將幫助其他人了解你的思維過(guò)程。這項(xiàng)活動(dòng)通常被稱(chēng)為“收斂寫(xiě)生。”
發(fā)散和收斂的寫(xiě)生欲了解更多信息,請(qǐng)參閱利亞Buley的演講從2010年FailCon,“ 優(yōu)秀設(shè)計(jì)更快,“和Brandon Shauer的文章” Sketchboards:探索+更快更好的UX解決方案?!?br/>創(chuàng)建UI流量的
煮沸后一組關(guān)鍵的屏幕上你的想法,下一步就是要探討它們?nèi)绾螀f(xié)同工作。對(duì)于這一點(diǎn),創(chuàng)建幾個(gè)UI流量(即一系列關(guān)鍵的屏幕上),展示了用戶(hù)如何使用您的解決方案來(lái)完成任務(wù)。UI流高亮的使用界面元素(例如,按鈕被點(diǎn)擊或使用手勢(shì))和系統(tǒng)如何響應(yīng)(例如,動(dòng)畫(huà),過(guò)渡,彈出對(duì)話(huà)框或新畫(huà)面)。它們還顯示一些關(guān)鍵的屏幕在不同的狀態(tài)下(例如,初始為空的內(nèi)容,后來(lái)充滿(mǎn))。
您可以在UI流不同的結(jié)果可視化(如搜索結(jié)果列表,與一個(gè)空列表)。你的流量將不再是線(xiàn)性的,不同的分支會(huì)顯示出不同的結(jié)果。但嘗試的分行數(shù)目限制在一個(gè)單一的用戶(hù)界面流。每個(gè)分支增加了復(fù)雜性,使您的流量更難理解。這也使得它們更難解釋。
UI流程可視化的用戶(hù)如何得到從A到B(大版)

您不需要繪制所有的用例;挑選那些是重要的,將被用于最。帕累托原則提供了一個(gè)很好的經(jīng)驗(yàn)法則:原型的20%,80%的時(shí)間將用于功能。
我通常開(kāi)始素描的關(guān)鍵用例之一來(lái)嘗試想出一個(gè)辦法來(lái)解決它。我會(huì)突出顯示在屏幕上的互動(dòng)和(通常)用箭頭連接屏幕。我將解釋每個(gè)步驟和標(biāo)簽的關(guān)鍵的屏幕上。與往常一樣,我瘋狂注釋。
對(duì)于如何勾畫(huà)移動(dòng)屏幕和UI流量的靈感,看在吉賽爾·穆勒的文章“ 鼓舞人心的UI線(xiàn)框草圖 “;MOObileFrames,博客,展示移動(dòng)線(xiàn)框草圖和線(xiàn)框,網(wǎng)站的Jakub Linowski的。您也可以使用JAKUB的“ 互動(dòng)速寫(xiě)符號(hào) “(PDF)在你的UI流程。
要采取的步驟
為了給你一些更多的情況下,向您展示如何在上述三個(gè)活動(dòng)之間的相互關(guān)系,這里有步驟一個(gè)典型素描會(huì)議:

列出你有什么你想捕捉的信息。
草圖(例如一鍵屏幕變化或UI初始流量)的第一組。
回顧自己的草圖。
每個(gè)變體的實(shí)力和弱點(diǎn)是什么?
UI元素和數(shù)據(jù)的一致性(即,相同的元件使用相同的任務(wù))?
你顯示數(shù)據(jù)相同的方式?
交互選項(xiàng)清楚了嗎?
從別人得到一些反饋。與同齡人開(kāi)始,并繼續(xù)與潛在的用戶(hù),如果可能的話(huà)。
他們的第一印象是什么?
他們最喜歡的是什么?為什么呢?
他們不喜歡什么?為什么呢?
目前尚不清楚在你的草圖?
他們提出了什么樣的改進(jìn)呢?他們?yōu)槭裁匆ㄗh他們嗎?
循環(huán)的概念。
你能結(jié)合不同的優(yōu)勢(shì),不同的概念,到一個(gè)新的概念?
草圖加以澄清?
步驟可以減少或簡(jiǎn)化?
檢查的初步反饋的結(jié)果。
有新的問(wèn)題來(lái)了?
你有什么樣的見(jiàn)解獲得了什么?

正如你可以看到,很多這些“為什么”的問(wèn)題。這是因?yàn)樗孛枋窍肓私獾膯?wèn)題,同時(shí)努力解決方案。寫(xiě)下所有的問(wèn)題過(guò)程中出現(xiàn)的素描草圖本身旁邊。這將引導(dǎo)你走向正確的概念。
除了素描
你已經(jīng)創(chuàng)建了關(guān)鍵的屏幕上的草圖和主要用例后,你會(huì)想試試你的概念,住在一個(gè)真正的手機(jī)。,如流行和Protosketch的應(yīng)用程序,讓您導(dǎo)入草圖的圖片,并把它們變成一個(gè)原型。這種方法將非常快,低保給你一個(gè)概念的互動(dòng)的感覺(jué)。這兩個(gè)應(yīng)用程序允許您定義的可點(diǎn)擊的熱點(diǎn)和頁(yè)面轉(zhuǎn)換,使原型的互動(dòng)更加逼真。
另外,導(dǎo)入你的屏幕如AXURE到更先進(jìn)的工具,并在那里建立一個(gè)原型。

無(wú)論采用哪種方式,你的目標(biāo)是快速測(cè)試的概念和真正的手機(jī)上用很少的努力。

成都網(wǎng)站建設(shè)http://www.muchs.cn/

分享名稱(chēng):移動(dòng)網(wǎng)站正在向用戶(hù)體驗(yàn)設(shè)計(jì)靠攏,并正在走向成熟
網(wǎng)址分享:http://www.muchs.cn/news/77101.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有用戶(hù)體驗(yàn)

廣告

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

猜你還喜歡下面的內(nèi)容

h5響應(yīng)式網(wǎng)站建設(shè)

用戶(hù)體驗(yàn)知識(shí)