赞助商
立即赞助

在成熟的UI设计流程中,视觉稿是绕不开的环节

UI设计3年前 (2021)发布 流光
2.3K 0 0

“为了设计这个产的UI我们已经设计了线框图、原,没有时间和精再在这当中一个环节了!”对于UI设计流程,我少听到这样的抱怨。

在设计APP和页界面的时候,设计团队会直接跳过视觉稿(Mockup)设。的确,从脑风暴,需求分析,到线框图,原型,整设流程后面还不少环节,但视觉稿的设面这些环节同样重,即使按照精益设原则或者速原型设的需求看,它也不可或缺的部分。

今天,我们来聊聊设计流程中的视觉稿是么,及如何创建有效的视觉稿,善设计流程。

在成熟的UI设计流程中,视觉稿是绕不开的环节

视觉稿(Mockup)是什么?

线框图(Wireframe),原型(Prototype)视觉稿(Mockup)这三者之间相互关联,相似性,但截然不同,但对于许多人言,它们依然令人感到迷惑。明白它们之间的差异关联,好的办法通过具体的设流程实际运用了解。

从构思到开发,中间通会经历到个同的设计阶。

  • 通过绘制UI草图,从诸多法中筛选出潜力的方案
  • 绘制线框图,规划信息的层次结构,将容分组,突核心功
  • 绘包含细节的视稿
  • 将真实的交互和视觉集一起构建成型

样的几个阶段构成使得设计师以低成、快速地测试和迭代它们的想法,设计产品框架。不仅仅适用新的产品搭建,而且适宜界面的新版更新。

下来,不妨专注于视觉稿的计环节。线框图是低保真的,而视觉稿则是增加了细节,但是并未加入交互,和高保真的型相比,它算得上是中等保真度。视觉稿是静的,细节丰高还度的,所以你可以通过这一征来它。

将线框图视作为骨架,在此基础上加入配色,搭配好体,注入品相关素材,内容布局进适度调,加入样合适导航,视觉稿出来了。

在成熟的UI设计流程中,视觉稿是绕不开的环节

那么为什么要加入视觉稿设计环节呢?为视觉稿是晰传视觉要求最有效法,于、开发等利益相关者而言尤其要,如没有视觉稿,而是转而借助早期低保真线框图来展现品进度,疑是会让觉不舒服。虽然视觉稿不具备交互性,是于经验丰富开发者或者其他参与者,是可以从获大量有效信息。

“视觉稿在线框图基础上发展而来,更具有组织性也更符合团队愿景,它额优势在于,过优秀视觉,利益相关者呈现出更为有效信息。”——Marcello Graciolli

基本上,视觉稿是线框图和原型粘合剂。

制作视觉稿的几种方法

让许多UI设计师抵触视觉稿这设计环节原在于,视觉稿看起来耗费时,是吃力不讨好。

幸运的,几种方法能够确保不降低效率的况下制作视觉稿,这对于UI设师言,就不会太影响整体的效率发度了。

基于代码构建视觉稿

对于懂得码的UI设师言,视觉稿并不一都画出的哦。通过尽早使用码构建,降低后发的时间,不过这需设师娴熟的码使用技巧,否则后码不具备可用性,将会限制的产品研发。

在成熟的UI设计流程中,视觉稿是绕不开的环节

使用可靠的设计工具来构建视觉稿

许多设计师会尽量使用他们所细化你设计工具来制作UI视觉稿,使用Photoshop 和 Sketch 等工具都能制作出像素完美静态视觉稿。

设具中构建视觉稿的决性因素于,作设的可复用性。如果设完视觉稿之后,原型阶段还需重新搭建一遍的话,无疑令人难以接受的。好以Justinmind 表的一些新的原型具能够同PS、AI、Sketch 这些具行无缝接驳,可以这些原型具中直接调用。Justinmind 中,即使SVG文件画板都完全可编辑的。

使用原型工具来制作视觉稿

如果彻底告别具之间差异性,不如使用原型具“降维打击”制作视觉稿。这时候,需筛选出一款具相对完善的UI元素库的具帮制作保真度较高的视觉稿。这款具应该可以让充分调用丰富的字体图标资源(比如Justinmind就集了Google Fonts),确保的设足够顺畅。

注意下列常见的视觉稿设计误区

刚始制作视觉稿的UI设师常常会犯下下面的错误:

  • 期待视觉稿能够传出功能。视觉稿看起来是不,是它们实上仅仅是个孤立图像,它们不足以承载网站或者APP体验复杂性。真正能够传功能特是可交互原型。
  • 功能膨胀。视觉稿中添加各种控件并不难,不过并不清楚所功能的况下就凭空添加各种按钮,那么这就功能膨胀。
  • 未解决问题。许多视觉稿看起来非漂亮,但是并解决实际的问题。将视觉和问题分开的误区千万要踏入进,这一定会在之后坑到自己。

结语

你真正开始将视觉稿视作为连接线框图和原型组织,它要性和功能性会更好地呈现在你前。过视觉稿来消除视觉上可能潜在问题,UI设计师也可以在这个阶段更好释放自己创造力,专注于功能、层结构和体验。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:一个合格的 UI 按钮到底需要具备什么样的素质?在很多设计师眼里似乎并不是一个太大的问题的,但是在实际设计的时候...
ui设计
和大家分享一下,杨杨在年前做的一套新年主题图标,整个过程成长很大,也希望能给大家一些启发。 其实一套主题图标对于一个...
图标优化
针对设计师评审时常见的情况,我整理了一下关于评审的方法,希望对大家有用,可以帮大家早一点下班~ 欢迎关注作者...
ui设计
本文总结了 9 个排版的小技巧,帮你快速提高版式设计能力。 两种颜色就够了 圆形聚焦 粗框装饰 左起的1/4法则 分散的三角...
平面设计
@做设计的面条 :最近有面粉说,发现我现在变的很高产,基本每天都能在我的朋友圈里看到我用随手拍的照片设计出来的海报。 ...
做设计的面条
下半年,往往是电商设计师最繁忙的季节,双11、双12、双旦节等重量级节日接踵而来。 不过,有意思的是,与双11、双12活动...
中国风
本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。 ...
入门
2020年过去了,有很多事情都停滞不前,不过设计工具和软件依然在研发人员的努力之下,照常稳定推进更新。对于整个 UI/UX 行业...
ui设计