免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

打造網(wǎng)站視覺(jué)稿的三種方式

2013-04-30    分類: 網(wǎng)站建設(shè)

創(chuàng)建網(wǎng)站視覺(jué)稿(mockup)有很多種方式。當(dāng)然這并沒(méi)有所謂“最好的”方法,但依據(jù)部分UI和UX設(shè)計(jì)師的風(fēng)格與偏好(以及設(shè)計(jì)流程),我們可以總結(jié)出幾個(gè)相對(duì)比較好的方法。

打造網(wǎng)站視覺(jué)稿的三種方式

本文將介紹幾個(gè)視覺(jué)稿工具、圖表設(shè)計(jì)工具,以及與原型十分近似的編碼的視覺(jué)稿的優(yōu)缺點(diǎn)。

 

01. 使用專門的工具

 

使用UXPin或者M(jìn)oqups 、Balsamiq 這樣的解決方案,能夠?yàn)槟闾峁﹦?chuàng)建視覺(jué)稿所需要的一切,讓整個(gè)流程變得簡(jiǎn)單。這些工具的存在,就是為了讓創(chuàng)建過(guò)程盡量簡(jiǎn)單,這樣你就可以把時(shí)間和精力花在風(fēng)格

 

UXPin這樣的工具能讓你輕松快速地創(chuàng)建視覺(jué)稿

 

資深專家和初學(xué)者都喜歡使用視覺(jué)稿工具,初學(xué)者在意的是它們的簡(jiǎn)單易用,專家欣賞的是專門針對(duì)高級(jí)需求定制的設(shè)計(jì)。

 

比起用于線框圖和視覺(jué)稿的其他非設(shè)計(jì)類工具(比如Keynote ),Moqups和Balsamiq的功能更為強(qiáng)大,但也僅限于低保真設(shè)計(jì)。當(dāng)然,如果原本的目標(biāo)就是快速創(chuàng)建低保真線框圖,這些工具是非常實(shí)用的。

 

視覺(jué)稿工具其實(shí)大部分是針對(duì)線框圖的。通過(guò)內(nèi)置協(xié)作,UXPin提供了數(shù)十個(gè)元素庫(kù)來(lái)節(jié)省時(shí)間,這樣就可以通過(guò)簡(jiǎn)單的拖拽和自定義來(lái)創(chuàng)建視覺(jué)稿。

 

02. 使用平面設(shè)計(jì)軟件

 

有的設(shè)計(jì)人員習(xí)慣使用Photoshop、Sketch或者Illustrator這樣的工具,尤其是那些對(duì)于那些可以精準(zhǔn)控制到像素的工具非常熟悉的人。如果你追求的是高水平的現(xiàn)實(shí)主義和視覺(jué)保真,平面設(shè)計(jì)平臺(tái)是很好的選擇。

 

平面設(shè)計(jì)軟件中,你可以訪問(wèn)無(wú)數(shù)的高度界定的顏色,因此,如果你被要求使用預(yù)設(shè)的配色方案--比如說(shuō)由于品牌形象的限制--那么這些軟件可能是你最好的選擇。除了顏色選擇之外,這些軟件還提供更多的視覺(jué)工具,可以幫助用戶解決一些細(xì)節(jié)問(wèn)題。

 

然而,使用這一類軟件的缺點(diǎn)是當(dāng)開(kāi)始編碼設(shè)計(jì)時(shí),可能會(huì)遇到難以轉(zhuǎn)換的問(wèn)題。在Photoshop中正常的功能可能并不總是適用于代碼(諸如字體、陰影、漸變效果等元素),這可能會(huì)在原型設(shè)計(jì)階段花點(diǎn)時(shí)間來(lái)找出解決方案。

 

學(xué)習(xí)如何在Sketch中創(chuàng)建視覺(jué)稿

 

如果你設(shè)計(jì)的是一個(gè)樣式復(fù)雜的頁(yè)面,最好能在設(shè)計(jì)視覺(jué)稿的過(guò)程中敲定具體的視覺(jué)細(xì)節(jié)(這種情況下,Photoshop和SKetch這類的工具能為你提供更多的選擇)。

 

看看Hubspot上最美主頁(yè)的名單,你就會(huì)理解為什么早一點(diǎn)處理視覺(jué)細(xì)節(jié)會(huì)更好。類似的,如果你正在接洽的是一個(gè)挑剔的、難以取悅的客戶,向他們展示一個(gè)美觀大方的視覺(jué)稿可能會(huì)幫你獲得客戶的青睞。

 

在Photoshop或Sketch中創(chuàng)建的視覺(jué)稿可以拖放到免費(fèi)的UXPin應(yīng)用程序中

 

值得一提的是,Photoshop或Sketch中創(chuàng)建的視覺(jué)稿可以通過(guò)UXPin拖拽至原型設(shè)計(jì)階段。這能讓你輕輕松松幾個(gè)點(diǎn)擊就能將操作所有圖層,并確保你不需要從頭開(kāi)始做原型。

 

如果視覺(jué)不是你唯一的優(yōu)先考慮,使用一個(gè)能處理線框圖、視覺(jué)稿和原型的工具會(huì)更有效率。除非你追求的是最右的視覺(jué)效果,那么使用平面設(shè)計(jì)軟件來(lái)做視覺(jué)稿帶來(lái)的麻煩要比便利多--所有一定要定期與開(kāi)發(fā)人員聯(lián)系,因?yàn)檫@些工具并不是為了協(xié)作而設(shè)計(jì)出來(lái)的。

 

03. 視覺(jué)稿編碼

 

對(duì)于初學(xué)者來(lái)說(shuō),如果你的職責(zé)更多的是設(shè)計(jì)人員,并不擅長(zhǎng)編碼,那么這個(gè)選擇顯然不適合你。編碼視覺(jué)稿并不是一個(gè)默認(rèn)選擇。

 

大多數(shù)編碼工作都可以等到原型開(kāi)發(fā)階段(如果是HTML/Javascript原型)或者更晚(如果使用原型設(shè)計(jì)工具)。盡管有其復(fù)雜性和潛在的障礙,但許多知名設(shè)計(jì)師都主張?jiān)谝曈X(jué)稿階段就引入編碼工作。

 

在HTML中構(gòu)建結(jié)構(gòu),然后在CSS中進(jìn)行基礎(chǔ)布局,能夠簡(jiǎn)化整個(gè)開(kāi)發(fā)流程。至少是在理論上。很多人會(huì)爭(zhēng)論,說(shuō)在視覺(jué)稿階段集中精力做視覺(jué)方面的工作能夠節(jié)省將來(lái)花在決策和結(jié)構(gòu)上的時(shí)間。但那些支持在早期引入編碼的人則認(rèn)為,如果代碼先行寫(xiě)好,后續(xù)的一些數(shù)學(xué)上的變化,比如大小的調(diào)整等,就會(huì)很簡(jiǎn)單。

 

Ash Maurya擁護(hù)HTML/CSS路徑來(lái)創(chuàng)建視覺(jué)稿

 

編碼模型的大支持者之一是Spark59的創(chuàng)始人兼首席執(zhí)行官Ash Mauria。在描述他喜歡的創(chuàng)建視覺(jué)稿的方式的時(shí)候,他擁護(hù)HTML / CSS路徑,并提出了一些不錯(cuò)的觀點(diǎn):

 

可行性:僅僅為了好看而設(shè)計(jì)的“華麗的”視覺(jué)稿在轉(zhuǎn)換為代碼時(shí)比較困難,由此會(huì)造成時(shí)間和精力的浪費(fèi)。漸變、字體與效果等元素--在其他工具中很容易實(shí)現(xiàn)--在編碼時(shí)可能會(huì)很難處理,甚至無(wú)法重現(xiàn)。從代碼開(kāi)始能讓你能馬上知道自己能做什么不能做什么。

 

快速迭代:Maurya表示,通過(guò)簡(jiǎn)化迭代流程編碼實(shí)際上能夠節(jié)省不少時(shí)間。當(dāng)然,也有人認(rèn)為這拖延了設(shè)計(jì)決策,實(shí)際上增加了工作時(shí)間。

 

最少的浪費(fèi):“在產(chǎn)品交付的最終技術(shù)以外的其他任何產(chǎn)品中創(chuàng)建視覺(jué)稿都會(huì)造成浪費(fèi)。”因?yàn)檫@個(gè)視覺(jué)稿最終都會(huì)在HTML / CSS里,Maurya建議增加保真。

 

但就像我們先前說(shuō)過(guò)的,視覺(jué)稿編碼并不是常見(jiàn)的策略,而原因并不是編碼工作的難度。過(guò)早地開(kāi)始編碼可能限制你的創(chuàng)造力及進(jìn)行實(shí)驗(yàn)的意愿,因?yàn)槟銜?huì)擔(dān)心創(chuàng)意在代碼中的可行性,而不是它看起來(lái)會(huì)多好。

 

何時(shí)引入編碼工作取決于你。只要你先了解設(shè)計(jì)流程的輕重緩急,并及時(shí)告知開(kāi)發(fā)人員你制定的優(yōu)先排序。

標(biāo)題名稱:打造網(wǎng)站視覺(jué)稿的三種方式
分享網(wǎng)址:http://m.newbst.com/news16/616.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化云服務(wù)器網(wǎng)站內(nèi)鏈網(wǎng)站制作營(yíng)銷型網(wǎng)站建設(shè)網(wǎng)站收錄

廣告

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

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)站建設(shè)知識(shí)