機(jī)構(gòu)組織國(guó)企品牌官網(wǎng)網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)
打造網(wǎng)站視覺(jué)稿的三種方式
標(biāo)簽：
網(wǎng)站設(shè)計(jì)視覺(jué)設(shè)計(jì)
2017.06.23
創(chuàng)建網(wǎng)站視覺(jué)稿（mockup）有很多種方式。當(dāng)然這并沒(méi)有所謂“最好的”方法，但依據(jù)部分UI和UX設(shè)計(jì)師的風(fēng)格與偏好（以及設(shè)計(jì)流程），我們可以總結(jié)出幾個(gè)相對(duì)比較好的方法。
本文將介紹幾個(gè)視覺(jué)稿工具、圖表設(shè)計(jì)工具，以及與原型十分近似的編碼的視覺(jué)稿的優(yōu)缺點(diǎn)。
01. 使用專門的工具
使用UXPin或者Moqups 、Balsamiq 這樣的解決方案，能夠?yàn)槟闾峁﹦?chuàng)建視覺(jué)稿所需要的一切，讓整個(gè)流程變得簡(jiǎn)單。這些工具的存在，就是為了讓創(chuàng)建過(guò)程盡量簡(jiǎn)單，這樣你就可以把時(shí)間和精力花在風(fēng)格
資深專家和初學(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)題。
如果你設(shè)計(jì)的是一個(gè)樣式復(fù)雜的頁(yè)面，最好能在設(shè)計(jì)視覺(jué)稿的過(guò)程中敲定具體的視覺(jué)細(xì)節(jié)（這種情況下，Photoshop和SKetch這類的工具能為你提供更多的選擇）。
值得一提的是，Photoshop或Sketch中創(chuàng)建的視覺(jué)稿可以通過(guò)UXPin拖拽至原型設(shè)計(jì)階段。這能讓你輕輕松松幾個(gè)點(diǎn)擊就能將操作所有圖層，并確保你不需要從頭開始做原型。
如果視覺(jué)不是你唯一的優(yōu)先考慮，使用一個(gè)能處理線框圖、視覺(jué)稿和原型的工具會(huì)更有效率。除非你追求的是最右的視覺(jué)效果，那么使用平面設(shè)計(jì)軟件來(lái)做視覺(jué)稿帶來(lá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ù)編碼工作都可以等到原型開發(fā)階段（如果是HTML/Javascript原型）或者更晚（如果使用原型設(shè)計(jì)工具）。盡管有其復(fù)雜性和潛在的障礙，但許多知名設(shè)計(jì)師都主張?jiān)谝曈X(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)。從代碼開始能讓你能馬上知道自己能做什么不能做什么。
快速迭代：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é)稿編碼并不是常見的策略，而原因并不是編碼工作的難度。過(guò)早地開始編碼可能限制你的創(chuàng)造力及進(jìn)行實(shí)驗(yàn)的意愿，因?yàn)槟銜?huì)擔(dān)心創(chuàng)意在代碼中的可行性，而不是它看起來(lái)會(huì)多好。
何時(shí)引入編碼工作取決于你。只要你先了解設(shè)計(jì)流程的輕重緩急，并及時(shí)告知開發(fā)人員你制定的優(yōu)先排序。
結(jié)論
不要以為所有的視覺(jué)稿都差不多。平臺(tái)、保真、編碼的微小不同，最終會(huì)帶來(lái)非常大的差異。
在開始設(shè)計(jì)之前知道自己想要什么，知道自己的目標(biāo)--如果你想要一個(gè)能夠支持這三個(gè)階段的工具，那么你最好在一開始就使用它，而不是中途再開始用。同樣的，如果你需要一個(gè)優(yōu)秀的、逼真的視覺(jué)稿，請(qǐng)記住你可以試試在某些時(shí)候使用平面設(shè)計(jì)編輯器。
本文將介紹幾個(gè)視覺(jué)稿工具、圖表設(shè)計(jì)工具，以及與原型十分近似的編碼的視覺(jué)稿的優(yōu)缺點(diǎn)。
01. 使用專門的工具
使用UXPin或者Moqups 、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)開始編碼設(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)擊就能將操作所有圖層，并確保你不需要從頭開始做原型。
如果視覺(jué)不是你唯一的優(yōu)先考慮，使用一個(gè)能處理線框圖、視覺(jué)稿和原型的工具會(huì)更有效率。除非你追求的是最右的視覺(jué)效果，那么使用平面設(shè)計(jì)軟件來(lái)做視覺(jué)稿帶來(lá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ù)編碼工作都可以等到原型開發(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è)開發(fā)流程。至少是在理論上。很多人會(huì)爭(zhēng)論，說(shuō)在視覺(jué)稿階段集中精力做視覺(jué)方面的工作能夠節(jié)省將來(lái)花在決策和結(jié)構(gòu)上的時(shí)間。但那些支持在早期引入編碼的人則認(rèn)為，如果代碼先行寫好，后續(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)。從代碼開始能讓你能馬上知道自己能做什么不能做什么。
快速迭代：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é)稿編碼并不是常見的策略，而原因并不是編碼工作的難度。過(guò)早地開始編碼可能限制你的創(chuàng)造力及進(jìn)行實(shí)驗(yàn)的意愿，因?yàn)槟銜?huì)擔(dān)心創(chuàng)意在代碼中的可行性，而不是它看起來(lái)會(huì)多好。
何時(shí)引入編碼工作取決于你。只要你先了解設(shè)計(jì)流程的輕重緩急，并及時(shí)告知開發(fā)人員你制定的優(yōu)先排序。
結(jié)論
不要以為所有的視覺(jué)稿都差不多。平臺(tái)、保真、編碼的微小不同，最終會(huì)帶來(lái)非常大的差異。
在開始設(shè)計(jì)之前知道自己想要什么，知道自己的目標(biāo)--如果你想要一個(gè)能夠支持這三個(gè)階段的工具，那么你最好在一開始就使用它，而不是中途再開始用。同樣的，如果你需要一個(gè)優(yōu)秀的、逼真的視覺(jué)稿，請(qǐng)記住你可以試試在某些時(shí)候使用平面設(shè)計(jì)編輯器。
400-7808-893 / 010-64913142
我想要個(gè)更針對(duì)我需求的方案
看過(guò)此文章的人也看過(guò)
友情鏈接：
也許您需要專業(yè)的服務(wù)，歡迎來(lái)電咨詢
您的需求，是我們前進(jìn)最大的動(dòng)力
關(guān)于我們
北京分形科技有限公司成立于2003年，是一家以AI為核心驅(qū)動(dòng)力，提供網(wǎng)絡(luò)品牌策劃、AI互聯(lián)網(wǎng)服務(wù)、WEB3服務(wù)、AI人工智能解決方案的綜合服務(wù)商
我們一直秉承的經(jīng)營(yíng)理念：責(zé)任、熱情、品質(zhì)、包容
主要業(yè)務(wù)范圍：AI互聯(lián)網(wǎng)服務(wù)（網(wǎng)站建設(shè),網(wǎng)站群,短視頻社交平臺(tái),APP,小程序）AI人工智能行業(yè)解決方案（智慧博物館,智慧公園,智慧景區(qū),智慧社區(qū),智慧醫(yī)療,智慧校園,）IoT智能物聯(lián)產(chǎn)品（智能步道,AR太極,AI健身,AI導(dǎo)覽,AI單車,智慧樹）WEB3（區(qū)塊鏈,元宇宙,NFT數(shù)字藏品）