打造網站視覺稿的三種方式

2017.06.23

　　创建网站视觉稿（mockup）有很多种方式。当然这并没有所谓“最好的”方法，但依据部分UI和UX設計师的风格与偏好（以及設計流程），我們可以总结出几个相对比较好的方法。

　　本文将介绍几个视觉稿工具、图表設計工具，以及与原型十分近似的编码的视觉稿的优缺点。

　　01. 使用专门的工具

　　使用UXPin或者Moqups 、Balsamiq 這樣的解決方案，能夠爲你提供創建視覺稿所需要的一切，讓整個流程變得簡單。這些工具的存在，就是爲了讓創建過程盡量簡單，這樣你就可以把時間和精力花在風格

　　UXPin這樣的工具能讓你輕松快速地創建視覺稿

　　资深专家和初学者都喜欢使用视觉稿工具，初学者在意的是它们的简单易用，专家欣赏的是专门针对高级需求定制的設計。

　　比起用于线框图和视觉稿的其他非設計类工具（比如Keynote ），Moqups和Balsamiq的功能更为强大，但也仅限于低保真設計。当然，如果原本的目标就是快速创建低保真线框图，这些工具是非常实用的。

　　視覺稿工具其實大部分是針對線框圖的。通過內置協作，UXPin提供了數十個元素庫來節省時間，這樣就可以通過簡單的拖拽和自定義來創建視覺稿。

　　02. 使用平面設計软件

　　有的設計人员习惯使用Photoshop、Sketch或者Illustrator这样的工具，尤其是那些对于那些可以精准控制到像素的工具非常熟悉的人。如果你追求的是高水平的现实主义和视觉保真，平面設計平台是很好的选择。

　　平面設計软件中，你可以访问无数的高度界定的颜色，因此，如果你被要求使用预设的配色方案--比如说由于品牌形象的限制--那么这些软件可能是你最好的选择。除了颜色选择之外，这些软件还提供更多的视觉工具，可以帮助用户解决一些细节问题。

　　然而，使用这一类软件的缺点是当开始编码設計时，可能会遇到难以转换的问题。在Photoshop中正常的功能可能并不总是适用于代码（诸如字体、阴影、渐变效果等元素），这可能会在原型設計阶段花点时间来找出解决方案。

　　學習如何在Sketch中創建視覺稿

　　如果你設計的是一个样式复杂的页面，最好能在設計视觉稿的过程中敲定具体的视觉细节（这种情况下，Photoshop和SKetch这类的工具能为你提供更多的选择）。

　　看看Hubspot上最美主頁的名單，你就會理解爲什麽早一點處理視覺細節會更好。類似的，如果你正在接洽的是一個挑剔的、難以取悅的客戶，向他們展示一個美觀大方的視覺稿可能會幫你獲得客戶的青睐。

　　在Photoshop或Sketch中創建的視覺稿可以拖放到免費的UXPin應用程序中

　　值得一提的是，Photoshop或Sketch中创建的视觉稿可以通过UXPin拖拽至原型設計阶段。这能让你轻轻松松几个点击就能将操作所有图层，并确保你不需要从头开始做原型。

　　如果视觉不是你唯一的优先考虑，使用一个能处理线框图、视觉稿和原型的工具会更有效率。除非你追求的是最右的视觉效果，那么使用平面設計软件来做视觉稿带来的麻烦要比便利多--所有一定要定期与开发人员联系，因为这些工具并不是为了协作而設計出来的。

　　03. 视觉稿编码

　　对于初学者来说，如果你的职责更多的是設計人员，并不擅长编码，那么这个选择显然不适合你。编码视觉稿并不是一个默认选择。

　　大多数编码工作都可以等到原型开发阶段（如果是HTML/Javascript原型）或者更晚（如果使用原型設計工具）。尽管有其复杂性和潜在的障碍，但许多知名設計师都主张在视觉稿阶段就引入编码工作。

　　在HTML中構建結構，然後在CSS中進行基礎布局，能夠簡化整個開發流程。至少是在理論上。很多人會爭論，說在視覺稿階段集中精力做視覺方面的工作能夠節省將來花在決策和結構上的時間。但那些支持在早期引入編碼的人則認爲，如果代碼先行寫好，後續的一些數學上的變化，比如大小的調整等，就會很簡單。

　　Ash Maurya拥护HTML/CSS路径来创建视觉稿

　　编码模型的最大支持者之一是Spark59的创始人兼首席执行官Ash Mauria。在描述他喜欢的创建视觉稿的方式的时候，他拥护HTML / CSS路径，并提出了一些不错的观点：

　　可行性：仅仅为了好看而設計的“华丽的”视觉稿在转换为代码时比较困难，由此会造成时间和精力的浪费。渐变、字体与效果等元素--在其他工具中很容易实现--在编码时可能会很难处理，甚至无法重现。从代码开始能让你能马上知道自己能做什么不能做什么。

　　快速迭代：Maurya表示，通过简化迭代流程编码实际上能够节省不少时间。当然，也有人认为这拖延了設計决策，实际上增加了工作时间。

　　最少的浪费：“在産品交付的最终技术以外的其他任何産品中创建视觉稿都会造成浪费。”因为这个视觉稿最终都会在HTML / CSS里，Maurya建议增加保真。

　　但就像我們先前说过的，视觉稿编码并不是常见的策略，而原因并不是编码工作的难度。过早地开始编码可能限制你的创造力及进行实验的意愿，因为你会担心创意在代码中的可行性，而不是它看起来会多好。

　　何时引入编码工作取决于你。只要你先了解設計流程的轻重缓急，并及时告知开发人员你制定的优先排序。

　　結論

　　不要以爲所有的視覺稿都差不多。平台、保真、編碼的微小不同，最終會帶來非常大的差異。

　　在开始設計之前知道自己想要什么，知道自己的目标--如果你想要一个能够支持这三个阶段的工具，那么你最好在一开始就使用它，而不是中途再开始用。同样的，如果你需要一个优秀的、逼真的视觉稿，请记住你可以试试在某些时候使用平面設計编辑器。

400-7808-893 / 010-64913142 我想要個更針對我需求的方案

上一篇文章：幼儿园網站建設营销推广的注意事项下一篇文章：电商行业網站建設之运营营销存在哪些问题？

看過此文章的人也看過

日韩一级一片