中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

五年時(shí)間轉(zhuǎn)瞬即逝，在自己小窩的最后一個(gè)周末；眼看著家當(dāng)和心情都被打包的差不多了，整個(gè)人卻終于感冒發(fā)燒腹瀉垮了下來(lái)，這是鬧哪樣呢。所幸本周前面幾天可以抽出些時(shí)間做掉這篇譯文，今天發(fā)掉先。接下來(lái)的兩個(gè)月，大概要集中業(yè)余零散精力放在一本iOS書的翻譯上了；希望還能有些時(shí)間分給這邊。雜七雜八就到這里，我們直接進(jìn)入正文——草圖原型實(shí)戰(zhàn)技巧，沒(méi)有務(wù)虛的大道理，每個(gè)內(nèi)容要點(diǎn)都很實(shí)用。走著。

在如今的用戶體驗(yàn)及產(chǎn)品圈子里，越來(lái)越多的人開(kāi)始了解到草圖及相關(guān)的原型工作對(duì)于整個(gè)設(shè)計(jì)流程的重要意義；不過(guò)在實(shí)際工作中，真正會(huì)拿起紙和筆的人貌似不是很多。作為一名用戶體驗(yàn)設(shè)計(jì)師，我(英文原文作者)每天都會(huì)畫草圖，我還霸著辦公室的一整面墻，在上面鋪滿草圖，標(biāo)注著各種上下文情景腳本。

確實(shí)，使用電腦中的原型設(shè)計(jì)軟件代替紙和筆，在很多時(shí)候是一種省時(shí)省力的做法，不過(guò)從可視化與實(shí)體化的角度來(lái)看，這并不是最好的解決方案。當(dāng)你正在構(gòu)思網(wǎng)站頁(yè)面或是移動(dòng)應(yīng)用的布局，琢磨著功能流程及上下文情景腳本的時(shí)候，拿起筆畫畫草圖才是更加直接有效的方式——它可以幫助你集中精力解決眼前的問(wèn)題，盡情的勾勒各種想法，而不必為工具軟件的使用方法或功能限制等方面的因素分散注意力。

很多文章都會(huì)告訴你草圖這東西有多給力，但是基本不會(huì)從實(shí)戰(zhàn)的角度進(jìn)行深入而細(xì)致的講解；本文則不然，我會(huì)實(shí)打?qū)嵉膹木唧w執(zhí)行的角度，向大家介紹一些常用技巧及其背后的道理，這些都是我和其他很多用戶體驗(yàn)設(shè)計(jì)師在每天的工作中所要用到的。

草圖 ≠ 繪畫

從視覺(jué)角度上講，即使最完美的草圖作品，與真正意義上的“繪畫”相比也是相距甚遠(yuǎn)的。如同你的思維與靈感，草圖應(yīng)該處于一種持續(xù)變化的狀態(tài)，隨時(shí)可以根據(jù)需求進(jìn)行調(diào)整。你確實(shí)不必掌握那些真正的繪畫技能，不過(guò)有相關(guān)經(jīng)驗(yàn)的話自然更好。

那么草圖的本質(zhì)到底是什么呢？簡(jiǎn)單來(lái)說(shuō)：

• 草圖是思維的表達(dá)方式，用來(lái)解決問(wèn)題。
• 草圖是一種可視化的、更加清晰有效的溝通方式。
• 畫草圖是一種技能，實(shí)踐的越多，能力越強(qiáng)。

不要太在意草圖在“繪畫”方面的視覺(jué)效果，試著把它當(dāng)作海報(bào)來(lái)審視——你第一眼看到的是什么？細(xì)節(jié)信息在什么地方？記住，人的目光總會(huì)被細(xì)節(jié)與強(qiáng)烈的對(duì)比所吸引。

就像語(yǔ)言表達(dá)能力可以決定人與人之間互相了解的程度，草圖的表現(xiàn)力也會(huì)直接影響到產(chǎn)品設(shè)計(jì)流程中的信息溝通。好在，我們有一些不錯(cuò)的方法可以學(xué)習(xí)和運(yùn)用，在實(shí)踐中逐漸提高自己的草圖表達(dá)技能。

分層作業(yè)

技巧

初期，使用淺灰色的馬克筆(大約20%到30%的灰度)勾畫輪廓和布局結(jié)構(gòu)；在進(jìn)入界面元素的細(xì)節(jié)部分之后，逐漸使用顏色更深的馬克筆或鋼筆。

解釋

從淺色開(kāi)始初步的框架工作，會(huì)讓事情變的容易些；在這個(gè)階段，犯些錯(cuò)誤也無(wú)妨，你可以逐步評(píng)估和調(diào)整想法。把線畫的凌亂些也沒(méi)太大所謂，在接下來(lái)的階段，使用顏色更深的線條逐步完善草圖之后，沒(méi)人會(huì)注意到這些早期的淺色輪廓。

隨著靈感落實(shí)成為確定的想法，并不斷的躍然紙上，我們使用的顏色也可以逐步加深了，必要的時(shí)候可以使用鋼筆來(lái)勾勒細(xì)節(jié)。通過(guò)灰度的差異來(lái)體現(xiàn)界面的邏輯，整個(gè)草圖的層次感會(huì)非常鮮明。

分層的做法還可以幫助我們?cè)诔跗趯⒆⒁饬Ψ旁趦?nèi)容結(jié)構(gòu)與視圖繼承等方面，不至于一開(kāi)始就被各種細(xì)節(jié)問(wèn)題和想法糾纏。如果你知道眼下的界面中需要一個(gè)列表，但不清楚列表項(xiàng)中的具體內(nèi)容，那么就使用淺色筆隨便畫些曲線來(lái)代替文案；在之后的細(xì)節(jié)階段，再回過(guò)頭來(lái)用深色筆添加一些具體的范例內(nèi)容。

注意

如果你更習(xí)慣于使用圓珠筆起草，并且打算接下來(lái)用馬克筆做輔助的話，記得將圓珠筆的墨跡晾干先，否則會(huì)被馬克筆中的酒精成分污濁掉。

經(jīng)過(guò)越來(lái)越多的實(shí)踐，你也許開(kāi)始變的更有把握，而逐漸忽視淺色底層繪制；最終結(jié)果也許不會(huì)很壞，但我個(gè)人仍然建議保留這一步驟，因?yàn)槟憧梢栽谶@個(gè)階段里做很多實(shí)驗(yàn)性的摸索，一點(diǎn)點(diǎn)評(píng)估和落實(shí)頭腦中的想法。

放松肢體

技巧

在畫長(zhǎng)線條的時(shí)候，試著讓自己的手與胳膊跟隨著肩膀移動(dòng)，而不是通過(guò)腕子或手肘來(lái)用力；只有當(dāng)你需要快速的畫短線條，或是處理一些局部細(xì)節(jié)的時(shí)候，手肘的驅(qū)動(dòng)才更加有效。

解釋

肩膀的旋轉(zhuǎn)驅(qū)動(dòng)，可以幫助你畫出更長(zhǎng)更直的線條。如果只借助手腕的力量，你會(huì)發(fā)現(xiàn)畫出的直線通常是彎的…另外，還可以在畫長(zhǎng)線之前，先在起點(diǎn)和終點(diǎn)的位置各做一個(gè)標(biāo)記，以增強(qiáng)目標(biāo)感。

繪制多邊形

技巧

對(duì)于那些由長(zhǎng)線條組成的、用來(lái)表示頁(yè)面或設(shè)備輪廓的矩形和其他多邊形，可以通過(guò)旋轉(zhuǎn)紙面的方法依次畫出邊框線，而自己的姿勢(shì)與落筆的角度可以保持不變。

解釋

要在每個(gè)方向上都畫出很漂亮的直線，確實(shí)不是容易的事情。只會(huì)畫橫線不會(huì)畫豎線？把紙面旋轉(zhuǎn)90度好了——這樣無(wú)論什么角度的直線，對(duì)我們來(lái)說(shuō)其實(shí)都是一個(gè)方向的，我們自己最習(xí)慣的姿勢(shì)和落筆的角度就可以保持不變了；簡(jiǎn)單又實(shí)用。

注意

如果你正在使用白板，這種技巧顯然不適用；還是多練習(xí)豎線的畫法吧。

對(duì)交互方式的體現(xiàn)

技巧

以普通草圖為基礎(chǔ)，將便簽貼紙附著在圖紙的相關(guān)位置上，用來(lái)表示那些具有交互性質(zhì)的界面元素，比如提示氣泡、彈出層、模態(tài)窗口(modal windows)等。

• 我們可以在一張草圖上使用便簽貼紙同時(shí)定義多個(gè)交互元素，然后按照具體的交互規(guī)則，取下一些，再對(duì)包含剩余交互元素的草圖進(jìn)行掃描和復(fù)印，最終就可以得到一套完整的交互示意草圖。
• 使用不同顏色的貼紙來(lái)表示不同類型的交互元素。
• 一張貼紙的尺寸難以完整的表示模態(tài)窗口？在旁邊拼一張好了。
• 一張貼紙的尺寸對(duì)于提示氣泡來(lái)說(shuō)太大了？裁掉一部分也無(wú)妨。

解釋

這種方法可以幫助我們?cè)诓恍薷牟輬D框架的情況下快速的定義頁(yè)面元素的交互方式。便簽貼紙的位置可以很方便的被調(diào)整，我們還可以在上面勾畫該界面元素中的細(xì)節(jié)內(nèi)容。

復(fù)印與模板化

有時(shí)，對(duì)于某些UI元素，你也許要重畫并調(diào)整很多次。這不能算是壞事，你可以把這樣的需求看作重新構(gòu)思并快速迭代的機(jī)會(huì)。這種情況下，掃描儀或復(fù)印機(jī)可以幫助我們提升一些效率。

技巧

使用掃描儀或復(fù)印機(jī)，將穩(wěn)定版本的草圖復(fù)制多張作為框架模板，在其中繪制那些變動(dòng)需求比較多的UI元素。另外：

• 界面中的某個(gè)部分畫敗了嗎？用一片白紙覆蓋住，復(fù)印一下，使用影印稿繼續(xù)。
• 如果你需要在草圖中使用瀏覽器窗口或是移動(dòng)設(shè)備作為背景，那么可以找來(lái)一些現(xiàn)成的圖片素材，復(fù)印多張為我所用。Smashing Magazine的這篇文章中提供了很多典型的背景框架，包括瀏覽器、手機(jī)等。
• 如果你需要改變某些已完成草圖中的側(cè)邊欄，可以用一張白紙畫一個(gè)新的，復(fù)印幾張，直接粘貼到這些需要被修改的草圖中，覆蓋掉舊版的。

解釋

復(fù)印機(jī)就是傳統(tǒng)版的“Ctrl+C”和“Ctrl+V”，它能幫我們快速生成模板；這種方式不僅能提升效率，而且可以減少我們?cè)趯?shí)驗(yàn)和摸索過(guò)程中的顧慮——如果把某些UI元素搞亂套了，換一張模板重新來(lái)過(guò)就是了。

另外，如果你需要使用其他色彩的馬克筆來(lái)標(biāo)注重要內(nèi)容或是繪制特定的界面元素，那么我建議你畫在影印稿上，這樣可以有效避免不同種類墨水之間的污濁作用。

勾畫細(xì)節(jié)

在細(xì)節(jié)方面，可以使用直尺作為輔助工具。特別是印有刻度的透明直尺，可以讓我們清楚的觀察到正在畫的直線與周圍元素的相對(duì)位置關(guān)系。

技巧1

使用直尺和淺灰色馬克筆繪制輔助線。

解釋

這種方式特別適用于規(guī)劃那些需要等距分隔的細(xì)節(jié)元素，包括列表項(xiàng)、圖表、按鈕等；我們可以基于這些輔助線進(jìn)一步繪制這些元素，在細(xì)處體現(xiàn)優(yōu)雅與嚴(yán)謹(jǐn)。

技巧2

在前文“分層作業(yè)”的部分，我們提到了首先使用淺灰色的馬克筆繪制界面輪廓及布局結(jié)構(gòu)；而進(jìn)入細(xì)節(jié)部分之后，可以使用顏色更深的馬克筆或是圓珠筆、鋼筆，配合直尺來(lái)勾畫。

解釋

在“分層作業(yè)”的最后階段，我們會(huì)希望最終成型的界面整體以及其中的UI組件能夠清晰的突顯出來(lái)，而不要融匯在各種輔助線等干擾元素當(dāng)中。使用深色筆和直尺，我們可以畫出長(zhǎng)而筆直的濃重線條，有效的突出重要部分的邊界。

與“繪畫”不同，我們完全不用回避對(duì)直尺的使用；重要的是，要知道怎樣正確的運(yùn)用這個(gè)工具——不要在草圖工作的一開(kāi)始就使用直尺，它應(yīng)該在細(xì)節(jié)部分與最終突出呈現(xiàn)的階段發(fā)揮價(jià)值。

技巧3

我們還可以使用直尺來(lái)快速整齊的裁紙，例如將便簽貼紙裁成更加貼近其所要模擬的UI元素的形狀。

解釋

這比從工具箱里再拿一把剪刀出來(lái)要省事兒些，因?yàn)槌咦右呀?jīng)在我們手邊了…而且過(guò)機(jī)場(chǎng)安檢時(shí)也不會(huì)惹什么麻煩…

把故事講的更加完整

技巧

試著在上下文環(huán)境中構(gòu)思和繪制草圖，展示出當(dāng)前界面的應(yīng)用場(chǎng)景和使用方法，或者干脆直接畫在設(shè)備的速寫圖中。

解釋

這樣做可以迫使我們認(rèn)真思考應(yīng)用的使用環(huán)境，從草圖階段開(kāi)始就站在用戶心智的角度思考設(shè)計(jì)方案，并且能夠盡早發(fā)現(xiàn)應(yīng)用功能設(shè)計(jì)中的潛在問(wèn)題。

確實(shí)，沒(méi)人愿意每做一張草圖之前都要首先畫個(gè)硬件設(shè)備出來(lái)。我并不是說(shuō)必須要這樣做，但是對(duì)設(shè)備及應(yīng)用環(huán)境進(jìn)行粗略的勾勒，是一件具有長(zhǎng)遠(yuǎn)價(jià)值的事，尤其對(duì)于移動(dòng)應(yīng)用來(lái)說(shuō)，對(duì)上下文環(huán)境的描繪越詳實(shí)越好。我個(gè)人來(lái)說(shuō)，通常會(huì)把移動(dòng)設(shè)備簡(jiǎn)單而完整的畫出來(lái)，然后在“屏幕”中按照實(shí)際比例繪制應(yīng)用界面的草圖——這樣做可以讓我時(shí)刻留意設(shè)備屏幕的規(guī)格尺寸及比例約束。另外，我們還可以大致的描繪出用戶的操作手型，以此來(lái)粗略的評(píng)估應(yīng)用界面中的元素交互方式是否合理。

注意

想要做到這一點(diǎn)，顯然需要具備一定的速寫能力；實(shí)在覺(jué)得難搞的話也沒(méi)關(guān)系，就使用我們?cè)凇皬?fù)印與模板化”中提到的方式好了，直接用設(shè)備的圖片做底板，沒(méi)問(wèn)題。

扔掉草圖本

技巧

改用普通A4或8.5*11英寸的復(fù)印紙。

解釋

草圖的目的是溝通與分享信息。普通復(fù)印紙可以很容易的被貼到墻上，方便項(xiàng)目相關(guān)成員圍觀討論。另外，如果需要制作模板或是備份存檔，自然是復(fù)印紙更加便于復(fù)印或是掃描，而不像草稿本那樣需要很費(fèi)力的折疊起來(lái)先。

你還在等什么？

草圖不只是設(shè)計(jì)師的玩具。開(kāi)發(fā)者、產(chǎn)品經(jīng)理、業(yè)務(wù)分析人員等同樣可以在工作中充分使用起來(lái)。草圖是團(tuán)隊(duì)之間分享、溝通、探索想法的最直觀高效的工具。另外我發(fā)現(xiàn)，比起打印稿或是頁(yè)面截圖一類的形式，草圖可以更有效的激發(fā)項(xiàng)目參與者的參與意識(shí)，大家的反饋會(huì)更加積極主動(dòng)。

始終記住一點(diǎn)，繪制草圖是一個(gè)梳理與表達(dá)想法的過(guò)程，而非創(chuàng)作美術(shù)作品。完成草圖后，不妨評(píng)估一下——這樣問(wèn)自己：“這些草圖能否幫我更好的就各種想法進(jìn)行溝通？” ?而不是“畫的夠不夠炫？”

是時(shí)候去實(shí)踐了，千萬(wàn)別讓自己在工作中被工具和技術(shù)困住手腳；這些其實(shí)就像玩泥巴一樣有趣。

本站原創(chuàng)編譯文章。如需轉(zhuǎn)載，請(qǐng)注明：
本文來(lái)自Be For Web

英文原文:http://uxdesign.smashingmagazine.com/2011/12/13/me…

譯者信息:?C7210?– Web設(shè)計(jì)與前端玩家，現(xiàn)就職于大眾點(diǎn)評(píng)網(wǎng)產(chǎn)品部用戶體驗(yàn)設(shè)計(jì)組(UED)