APP界面设计之前的那些事

@陈子木很多做UI设计师开始设计前都有制作原型的习惯,可是万事开头难,打开原型设计软件之前,设计师还需要耗费大量的经历在寻找灵感,思考框架,甚至在绘图本上涂抹很差时间。看看过来人是如何开始他们的UX流程和原型设计的吧!

我会随手在我周围的每一个物体表面上涂鸦,记录下点滴的想法。不论是外卖菜单,还是办公室的玻璃窗还是Moleskine的笔记本,都是我记录想法的地方。

一切都是从头脑风暴开始的。当我刚刚开始设计产品的时候,我会先将脑中零散跳跃的词汇和一闪而过的图画都列在本子上,之后,开始寻找它们的共同点和相似之处。对我而言,我更喜欢使用带有方格的笔记本,因为它记录和绘图都更富有弹性,更加“响应式”。在这个阶段,完美往往不是我所追求的,这些草图更多是给我自己来看的。

在开始前,我一般会将所有关键点都列出来,将重点梳理出来。这个过程中,你可能会整理出一系列的需求,而这些条目会在你开始绘制交互设计稿的时候帮你优化流程。

下面是Smashing Magazine所提供的建议:

如何使用便签在单个画板中探索多种不同交互和思路

1、将多种不同的交互记录在便签纸上,置于统一画板中,有规律地一次移除一张贴纸,然后再扫描或者复印出来。

2、使用不同颜色的贴纸来代表不同的交互行为,这样会更系统。

3、如果一张便签还不够说明设计模型的细节的话,就在旁边加一张继续写。只有描述清楚,才能审视清楚,了解细节,把控全局。

4、如果交互细节描述简单,便签纸大了,那么可以用刀裁掉多余的部分,甚至可以根据布局裁剪成合适的造型。尽量让画板看起来更合理,更清爽。

按照上面的方法,会制作出不同的原型设计稿。这些设计稿的基本框架是一样的,但标注交互细节的贴纸不尽相同。

工具就是你的设计军火库。我存在电脑和云端的工具和资源不计其数,好的工具能够缩短你的设计过程,而合理搭配不同的工具会让你的设计如虎添翼,更快更优秀。

这只是我这几年整理的素材的一部分,并且我也逐渐离不开它们了。

当谈及设计线框图和原型所用的工具的时候,每个人习惯的工具和创作的手法都不尽相同(在数字艺术领域中,设计的手法从来都是多样化的!)。绘制草图用什么工具,搭配什么铅笔,使用PS还是AI,从来都没有死板的规定。重点在于,你喜欢用什么,你习惯用什么?

做UI模板设计的朋友近期发布了几款多功能绘图模板和流程图模板,希望做UX和UI设计的朋友可以在它们的帮助下快速绘制线框图和交互设计稿。以下是我见过的比较喜欢的设计稿:

当我需要制作一款移动端优先的UI设计的时候,我通常会使用这款iPhone UI模板(对应的,还有Android手机UI模板,Android平板UI模板,Windows Phone UI模板和Windows 8 UI模板等全套手绘模板)。

以下就是案例了:

这也是我最喜欢的组合,iPhone UI模板和iPhone流程图模板。

考虑到目前正在流行响应式设计,这个响应式设计绘图本也是我最近特别喜欢的东西:

这种低保真设计稿可以帮你快速完成线框图设计,当你和团队考虑完全之后,再挪到Axure、Omnigraffle或者InDesign这样的设计软件中去,然后展示给客户和合作伙伴看。

当你使用这样的低保真设计稿的时候,反而有机会更好地把控流程。

最好最快最粗糙的原型设计可能会用到你周围所有的东西,以达到最好的呈现。下图中的纸质智能手表设计原型就设计的非常巧妙,手绘的手腕和手表上挖了个洞,不同的UI随着你的拉动会顺次出现在“屏幕”上。不要拘束,也许你厨房的厨具、旧的数码设备,甚至于鞋盒都可以成为你设计的原材料!

你在的UX设计流程是怎样的?你会怎样制作UX原型?不妨与我们一同分享一下吧!

TIGER特意去淘宝找了找文章中提到的绘图模型,需要的可以点这里购买>>

Medium
优设网翻译:@陈子木

(0)

相关推荐

  • 易被忽略的App界面设计细节

    谈到App界面设计,很多新手都会过于纠结界面尺寸.图标尺寸,也会在颜色.字体.间距间毫无头绪.本文将按照app界面设计流程来讲解一下,新手需要注意的细节和误区. App界面设计流程 产品定义 产品定义 ...

  • “手把手教你设计”—12个最佳手机APP界面设计教程

    UI/UX 设计确实是需要一定的和学识才能真正在这个行业立足,并不是所有想成为设计师的人最后都能如愿以偿.他需要对设计有基本的了解,清楚设计的基本原则. 用户界面设计师和其他行业设计面临一样的挑战,那 ...

  • APP界面构图怎么做?

    网页的构图文章解析的非常多,页面排版的也是随手能找到.而APP界面设计的构图却少得可怜,可是这才是UI设计中的痛,UI设计师们日常工作中必须直面的任务,这篇文章像是及时雨出现,带给大家雨露.超级完整的 ...

  • APP界面切图命名和文件整理规范

    规范的命名方式可以提高客户端程序员的开发效率和团队协作.个人觉得标识符命名原则:尽可能的用最少的字符而又能完整的表达标识符的含义. 切图命名英文缩写三个原则: 1 较短的单词可通过去掉"元音 ...

  • 七组优美的APP界面(PSD免费下载)

    小编:今天给大家带来的是由UI8分享的APP界面设计.这七组虽然只有6个页面不是全套也够用了,主要是学习参考,可能会给您的设计带来灵感.涵盖的多个方面如购物.注册登录.后台数据.等等的APP类型.希望 ...

  • APP操作界面设计作业(又来掠你们了)

    界面设计是工作中做的最多的活儿,这期的作业题目又是临摹一张APP界面,灰色调调很难把握,注意质感的处理,这期的作业看着挺复杂,仔细观察后,你会发现有很多重复的UI元件. 题目:临摹一张操作界面有很多 ...

  • 儿童应用APP界面设计欣赏及建议(设计经验谈)

    因为小朋友的认知能力还比较有限,所以在为他们设计产品时就需要避免界面系统过于繁杂,并且使用大量的图片及文字做为提示.UI的风格要尽可能的体现轻松,愉快,自然的感觉(比如使用宽松简洁的布局:比较高明度的 ...

  • VR界面设计实践指南

    小编:@C7210 VR硬件设备正爆发式发展,做为UI设计师在此领域的跟进也需时时,以下这篇是关于VR界面设计的实践指南,希望对你有帮助. 一篇VR实践指导文章.Smashing Magazine好久 ...

  • AE制作APP界面gif动画效果

    我们在进行交互设计的时候,大部分时间是基于界面和功能逻辑的考虑,也适当的进行了交互效果的考虑,那么我们如何把交互的效果直观的表现出来呢,除了用axure做出交互的动态效果,ps绘制GIF图,代码设计动 ...