六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

手繪移動(dòng)端體驗(yàn)【譯】

2014-12-10    周周

all_640320(Lennart Hennigs 著     Ellazou & Charrywang譯    Crispinzhu校正     查看原文   轉(zhuǎn)載請(qǐng)注明出處)

移動(dòng)端用戶體驗(yàn)設(shè)計(jì)正日趨成熟。衡量這一點(diǎn)的方法之一就是看工具。原型工具可以讓我們創(chuàng)建線框圖以及點(diǎn)擊事件,比如Balsamiq、Axure以及Fireworks,幫助我們?cè)忈屇繕?biāo)用戶體驗(yàn)??鐬g覽器的框架工具如PhoneGap、Zurb Foundation以及jQuery Mobile可以幫助我們用互聯(lián)網(wǎng)本地化語(yǔ)言來(lái)創(chuàng)建原型:HTML、CSS以及JavaScript。

為什么?舉個(gè)草圖的案例

與以往幾乎沒(méi)有時(shí)間來(lái)設(shè)計(jì)的體驗(yàn)來(lái)比,我們似乎處于一個(gè)相對(duì)更好的處境。然而,這些工具也伴隨著隱藏成本:它們引導(dǎo)我們跳過(guò)了創(chuàng)造一個(gè)良好設(shè)計(jì)的產(chǎn)品必經(jīng)的關(guān)鍵步驟——也就是花時(shí)間去理解我們所面對(duì)的問(wèn)題。
這也就是為什么我會(huì)建議在打開你鐘愛的工具之前,先手繪著理解問(wèn)題并想出概念。
現(xiàn)在,你可能想的是如下問(wèn)題:
“我們的截止時(shí)間很緊迫,根本沒(méi)有時(shí)間再去涂鴉。我們必須馬上開始?!?/span>
“在XX工具里設(shè)計(jì)是目前為止比較快的方式,我必須很快能看到結(jié)果?!?/span>
“我們必須把結(jié)果給我們的客戶或合作伙伴或同事看。我們不能給他們看手繪
的線稿?!?/span>
“不好意思,我真的不會(huì)畫畫?!?/span>

我不僅聽別人幾次這樣反對(duì),我對(duì)自己也這么說(shuō)過(guò)。

定義問(wèn)題和解決方案

手繪可以讓我們一邊探索問(wèn)題一邊定義解決方案。它可以結(jié)構(gòu)化我們目前對(duì)問(wèn)題的理解,同時(shí)幫助我們找到可能的解決方案。
當(dāng)我們手繪出自己的想法時(shí),新的主意也會(huì)萌生。模糊和缺乏細(xì)節(jié)的草圖會(huì)培育出新的思路。在這里,模糊是件好事,因?yàn)槲覀儠?huì)自動(dòng)嘗試填補(bǔ)腦中的空白。這也正是草圖富有“創(chuàng)造性“的原因:它捕捉到我們已經(jīng)成型的想法,并迸發(fā)出新的火花。正如Bill Buxton在《Sketching User Experiences》中提到的:
“從草圖上學(xué)習(xí)到的內(nèi)容很大程度上是基于其表現(xiàn)的模糊性。也就是說(shuō),他們并不指定所有事情,而是鼓勵(lì)創(chuàng)造者們不自覺(jué)的融入各種不同的解釋?!?/span>

通過(guò)手繪不同的解決方案,我們不用立刻實(shí)現(xiàn)其中一種,就可以探索他們的可行性。這為我們提供了新的見解,也提出了新的問(wèn)題。手繪本質(zhì)上就是一個(gè)頭腦風(fēng)暴的鍛煉。

草圖的“成本”

把我們腦袋里的東西倒出來(lái)最快的方式就是拿起一只筆和一張紙迅速的畫出來(lái)。在我們鐘愛的原型工具里來(lái)做這件事情則需要花費(fèi)太多的時(shí)間:我們需要先創(chuàng)建一個(gè)項(xiàng)目,使用合適的庫(kù),將一些小矩形放在畫布上,畫一些小箭頭來(lái)連接這些矩形,把所有的元件都調(diào)整一下讓它們看上去更好看一些——30分鐘過(guò)去了。
如果我們不喜歡紙上畫的東西,可以將它扔進(jìn)垃圾桶然后重新開始。然而用原型工具的話,扔掉一些東西就比較困難了,因?yàn)槲覀兓ㄙM(fèi)了時(shí)間和努力去創(chuàng)建它——就算那個(gè)想法不是最好的,重新開始也更困難。反過(guò)來(lái)說(shuō),紙上手繪的內(nèi)容則成本低廉,實(shí)現(xiàn)迅速。

捕捉和評(píng)估設(shè)想最快的方式就是將它勾畫出來(lái)。

捕捉和評(píng)估設(shè)想最快的方式就是將它勾畫出來(lái)。

把草圖作為溝通工具

不過(guò)俗話說(shuō),一圖勝千言。草圖可以讓我們與合作者以及項(xiàng)目關(guān)注人們一塊探討對(duì)項(xiàng)目當(dāng)前的理解。我們可以使用很多不同的表現(xiàn)方式去詮釋項(xiàng)目不同的方面(下一個(gè)章節(jié)中我們會(huì)介紹最常用的一種方式)。在《餐巾紙的背后》一書中,Dan Roam提到:
“圖片可以表示很復(fù)雜的概念,概括大量信息,并以一種我們?nèi)菀卓慈菀桌斫獾姆绞匠尸F(xiàn),它們?cè)诔吻搴徒鉀Q各種問(wèn)題上都是有用的?!?/span>

我們的小伙伴可以直接指出我們想法上的鴻溝,共同討論可能的解決方案和替代方案。他們可以很好的理解我們的草圖,并且在想法的細(xì)節(jié)上給出一些反饋。向其他人展示我們的想法也會(huì)讓我們反思自己的想法。借此展示想法,我們會(huì)看到錯(cuò)誤的地方以及找到更好的替代方案。

把草圖作為合作工具

草圖作為一種有力的工具可以讓項(xiàng)目關(guān)注人們?cè)谠O(shè)計(jì)過(guò)程中盡早參與進(jìn)來(lái)。在定義的過(guò)程中,以下雞生蛋的問(wèn)題非常典型:項(xiàng)目關(guān)注人們?cè)诳吹揭恍┛梢暬慕鉀Q方案之前,是沒(méi)法制定一套完整的需求的,但是我們?cè)O(shè)計(jì)師在沒(méi)確定需求穩(wěn)定完善之前,是不愿意開工去實(shí)施解決方案的——我們想要去避免不必要的反復(fù)修訂,因?yàn)檫@會(huì)導(dǎo)致額外的工作。
擺脫這種困境的一種方法是在協(xié)作式工作坊里來(lái)手繪可能的解決方案,比如這一期設(shè)計(jì)工作室(參看Will Evans的文章“Introduction to Design Studio Methodology“)。我們可以帶領(lǐng)項(xiàng)目關(guān)注人們一步步的理解我們的概念(和其他備案),向他們解釋他們的需求對(duì)設(shè)計(jì)的影響。
草圖的入門門檻也很低,非設(shè)計(jì)師也可以參與。(到底是否通過(guò)手繪的方式與項(xiàng)目關(guān)注人討論,即取決于個(gè)人偏好,也存在許多爭(zhēng)議。你需要自己做決定。)
由于草稿是粗略不完整的,給出反饋也就更加容易。一些人會(huì)隱忍不發(fā),直到看到一個(gè)看上去完成度很好的頁(yè)面,因?yàn)樗麄冋J(rèn)為所有的工作必須要有一定的深入才行。高保真的視覺(jué)效果也會(huì)分散大家的注意力——大家會(huì)更傾向于討論視覺(jué)效果或微妙細(xì)節(jié),而不是聚焦在想法概念上。草圖會(huì)讓他們聚焦在核心概念上。
你唯一需要克服的就是不愿意將未經(jīng)打磨的作品展示給他人的心理障礙。

草圖不是繪畫

一個(gè)常見的誤區(qū)就是你的草圖必須要畫的很漂亮。但交互設(shè)計(jì)可不是上藝術(shù)課。你的草圖不需要看上去很漂亮;它們只需要表達(dá)出你的想法就可以。它們應(yīng)該是引發(fā)討論和催生想法的;它們并不是掛在墻上的藝術(shù)品。只要你會(huì)畫方框,箭頭,圓圈和簡(jiǎn)筆畫,你就可以畫草圖。正如Joshua Brewer在“Sketch, Sketch, Sketch”一文中提到:
“草圖不是最終目標(biāo)。最終目標(biāo)是在手繪過(guò)程中你學(xué)到了什么。所以即使你不會(huì)手繪也不用擔(dān)心?!?/span>

學(xué)習(xí)如何手繪不是本文的內(nèi)容,但是可以從以下的宣講、文章以及書目當(dāng)中學(xué)習(xí)到一些基礎(chǔ):

如何手繪

現(xiàn)在,但愿我已經(jīng)說(shuō)服你認(rèn)同手繪應(yīng)該是你工作流程中的一部分了。讓我們聊一聊在移動(dòng)項(xiàng)目中手繪什么吧。

發(fā)散式手繪

一開始,你需要為你的移動(dòng)應(yīng)用或網(wǎng)站收集不同的創(chuàng)意。開始繪制出針對(duì)一個(gè)關(guān)鍵頁(yè)面或其中一部分的各種版本。目標(biāo)有兩個(gè):獲取大量不同的想法,同時(shí)加以探索和評(píng)價(jià)。想法越多,后期的選擇就越多。這個(gè)階段通常被稱為“發(fā)散式手繪”。
這個(gè)階段的手繪有一種有效的多頁(yè)模版的工具。它提供了一頁(yè)以內(nèi)繪制6個(gè)不同版本方案的空間,并且它留出了指引描述的空間。不同創(chuàng)意一起呈現(xiàn),為后續(xù)的比較和討論提供便捷。
有很多在線模版(我最常使用Erik Loehfelm的模板)。選一個(gè)你喜歡的模板。

各種全局導(dǎo)航的變化方案線框稿

各種全局導(dǎo)航的變化方案線框稿

上面的截圖展示了關(guān)于一個(gè)App主菜單六個(gè)不同設(shè)計(jì)方案(順帶說(shuō)一句,它生動(dòng)地證明了我的草圖并不漂亮)。我并不總能想出6個(gè)不同版本(我喜歡告訴自己我是一個(gè)追求結(jié)構(gòu)的人),不過(guò)我會(huì)針對(duì)一個(gè)單頁(yè)面努力創(chuàng)造至少3種變化方案。因?yàn)檫@是一場(chǎng)頭腦風(fēng)暴,并且你會(huì)在后續(xù)的討論中需要多種選擇的可能性。在這里數(shù)量即朋友。
如果你碰巧才思枯竭,瀏覽一些手機(jī)UI圖冊(cè)去激發(fā)新思路(例如 Inspired UI, PttrnsLovely UI 和UI Parade)。它們演示了按主題或特性分組的解決方案(例如主菜單,聊天窗口)。匯集起你喜歡的草圖,組合成你自己的創(chuàng)意。
養(yǎng)成對(duì)每張草圖命名的習(xí)慣。這樣更容易標(biāo)注出方案之間的差別,并便于后續(xù)引用。我會(huì)增加說(shuō)明和標(biāo)注去解釋草圖以及它們后面貫穿的思路(比如優(yōu)點(diǎn)、缺點(diǎn)、與其他方案之間的抉擇、問(wèn)題、新特性,等等)。打標(biāo)簽和登記日期同樣是不錯(cuò)的習(xí)慣。

收斂式手繪

一旦你對(duì)一個(gè)界面繪制了多個(gè)版本的草稿時(shí),就可以選擇最佳解決方案了。不幸的是,單一的草圖很難驗(yàn)證所有界面。大多數(shù)情況下,你需要糅合幾個(gè)創(chuàng)意或創(chuàng)意中的不同方面形成優(yōu)勝概念。為了達(dá)到這個(gè)目的,你需要通過(guò)繪制更詳盡的草圖來(lái)深入探究。利用空白區(qū)域做標(biāo)注。草草記下全部問(wèn)題、新想法、要點(diǎn)或不明之處,以及留待討論的事項(xiàng)。這些都將幫助他人更好的理解你的思路。這項(xiàng)工作通常被稱為“收斂式手繪”。
更多關(guān)于發(fā)散式手繪和收斂式手繪的信息,請(qǐng)查看 Leah Buley在2010年失敗者大會(huì)(FailCon大會(huì))的演說(shuō):“Good Design Faster”,和Brandon Shauer的文章“Sketchboards: Discover Better + Faster UX Solutions”。

創(chuàng)建UI流程

在歸結(jié)幾個(gè)關(guān)鍵頁(yè)面的創(chuàng)意后,下一步就要探索它們?nèi)绾闻浜鲜褂昧?。為此,?chuàng)建一些UI流程(也就是一系列的關(guān)鍵頁(yè)面)展示一個(gè)用戶將如何通過(guò)你的解決方案完成一則任務(wù)。UI流程強(qiáng)調(diào)了使用什么界面元素(例如點(diǎn)擊哪個(gè)按鈕或使用何種手勢(shì)),系統(tǒng)如何反饋(例如系統(tǒng)通過(guò)一個(gè)動(dòng)畫、轉(zhuǎn)場(chǎng)、彈出框或新頁(yè)面做出反饋)。它們同樣展示關(guān)鍵界面的不同狀態(tài)(例如,最初的空白然后填入內(nèi)容)。
你可以視覺(jué)化呈現(xiàn)一個(gè)UI流程中的不同結(jié)果(例如搜索有結(jié)果頁(yè)和搜索無(wú)結(jié)果頁(yè))。你的流程最好不再僅僅是單線。不同的分支流程將展示不同的結(jié)果。不過(guò)要盡量限制單個(gè)UI流程中分支的數(shù)量。每增加一個(gè)分支都會(huì)提升復(fù)雜度,讓你的流程難以理解,也令它們很難被解釋清楚。

UI流程視覺(jué)化呈現(xiàn)了用戶如何從A到B的過(guò)程。

UI流程視覺(jué)化呈現(xiàn)了用戶如何從A到B的過(guò)程。

你不需要繪出所有的用例,選擇重要且被使用最多的用例。帕累托原則是個(gè)很好的標(biāo)準(zhǔn):20%的功能會(huì)在80%的時(shí)間里被使用到。
我通常從一則重要用例開始繪制并最終解決它。我會(huì)強(qiáng)調(diào)出各個(gè)界面之間的交互,通常用箭頭連接彼此。我會(huì)解釋每一步驟并標(biāo)記重要頁(yè)面。同樣,我會(huì)寬泛地做上注釋。
關(guān)于如何激發(fā)手機(jī)界面和UI流程繪制創(chuàng)意,請(qǐng)查看Gisele Muller的文章“Inspiring UI Wireframe Sketches”; MOObileFrames 一個(gè)提供手機(jī)界面線框圖的博客;Wireframes,Jakub Linowski的個(gè)人站點(diǎn)。你也可以將Jakub的Interactive Sketching Notation(PDF文檔)運(yùn)用到你的UI流程中。

操作步驟

為了給你更多的上下文環(huán)境,并演示上文提及的三種方式之間的關(guān)系,現(xiàn)在提供一個(gè)典型手繪的步驟分解:

  • 列出已有的信息和確立的目標(biāo)
  • 繪制第一組草圖(例如一個(gè)關(guān)鍵界面的各種方案或一個(gè)初始UI流程)
  • 自我復(fù)查草圖
    每個(gè)方案的優(yōu)點(diǎn)和缺點(diǎn)是什么?
    UI組件和數(shù)據(jù)是否保持一致?(就是說(shuō)同一任務(wù)中是否使用了相同的組件)
    數(shù)據(jù)展示方式是否相同?
    交互選項(xiàng)是否明確?
  • 征詢他人的意見。從同事開始再到潛在用戶。
    他們的第一印象是什么?
    他們最喜歡哪個(gè)?為什么?
    最不喜歡哪個(gè)?為什么?
    草圖中哪些信息他們不清楚?
    他們提了什么改進(jìn)意見?為什么?
  • 重審各個(gè)概念方案
    是否可以合并各個(gè)概念方案的優(yōu)點(diǎn)于一體?
    草圖能進(jìn)一步清理嗎?
    步驟能進(jìn)一步縮減嗎?
  • 依據(jù)最初的反饋再次復(fù)查
    是否引入新的問(wèn)題?
    你可以從中得到什么啟發(fā)?

你是否發(fā)現(xiàn),這里有很多的“為什么”。這是因?yàn)?strong>手繪是為了在提出解決方案的同時(shí)增進(jìn)對(duì)問(wèn)題的理解。在手繪后寫下繪制過(guò)程中產(chǎn)生的的問(wèn)題。它們會(huì)指引你走向正確的方向。

超越手繪

在創(chuàng)建關(guān)鍵頁(yè)面和核心用例的草圖后,你會(huì)希望在真實(shí)的手機(jī)上試驗(yàn)?zāi)愕母拍盍?。?a style="text-decoration:none;color:#666666;">Pop和Protosketch實(shí)現(xiàn)了導(dǎo)入草圖的照片,將它們轉(zhuǎn)變成原型。這種超快的低保真方法可以對(duì)交互方案找到一些感覺(jué)。這兩款應(yīng)用都允許你定義可點(diǎn)擊熱區(qū)和頁(yè)面的切換,這令得交互原型更真實(shí)。
此外,可以選擇導(dǎo)入頁(yè)面到像Axure這類更高級(jí)的軟件中生成原型。
無(wú)論你選擇什么工具,你的目標(biāo)是在真實(shí)的手機(jī)上用很小的代價(jià)快速測(cè)試原型。

便攜小貼士

手繪可以幫助你更好的理解問(wèn)題并可視化潛在的解決方案。這是一種快速且省錢的頭腦風(fēng)暴方式,同時(shí)它也在鎖定方案前測(cè)試很多的概念。手繪加速了概念創(chuàng)想和反復(fù)階段,在方案變更較容易的階段實(shí)現(xiàn)了早期問(wèn)題反饋。
在你下次手繪環(huán)節(jié)中,請(qǐng)牢記以下原則。它們能幫助你保持正確:

    • 偷懶
      別嘗試去再造一個(gè)輪子。手繪時(shí)利用現(xiàn)成的模版。
    • 激發(fā)靈感
      瀏覽設(shè)計(jì)范式庫(kù)和手機(jī)UI圖庫(kù),查看線框圖示例。挑選你喜歡的,糅合你自己的想法,創(chuàng)造一些新方案。
    • 適可而止
      你的手繪要能傳達(dá)你的想法。不要迷失在(不重要的)細(xì)節(jié)中。
    • 帕累托怎么用?
      你解決方案中只有小部分特性將被最頻繁地使用。聚焦在它們上面。想清楚哪20%的方案會(huì)在80%的時(shí)間里被用到?
    • 保持統(tǒng)一性
      用已有的手繪標(biāo)記或創(chuàng)建一種你自己的方式。這樣是的你的手繪更可靠。同事能較好地理解你的風(fēng)格,花更少的時(shí)間瀏覽完手繪并給予反饋。
    • 詳盡注釋
      手繪過(guò)程中,會(huì)涌現(xiàn)各種新命題、想法、問(wèn)題。記下它們,否則,你就忘了。
    • 開放心態(tài)
      將你的手繪公之于眾。把它們釘在墻上,并勤于向他人演示方案并獲取反饋。
    • 陷入懷疑時(shí),繼續(xù)手繪
      當(dāng)你不能確信某個(gè)方案時(shí),重新開始衍化方案。列舉出它們的利弊并從反饋中想清楚什么是最佳方案。

手繪愉快!

掃一掃,案例分享帶回家(藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái))

分享本文至:

日歷

鏈接

個(gè)人資料

存檔