UI设计师必知:关于线框图和设计的问题详解

所属分类: 平面设计 / 平面其它 阅读数: 1467
收藏 0 赞 0 分享
背景:两三年以前,我发现很多搞信息技术的朋友们(非设计师)交付设计时,用着上面列出的词汇。他们以为线框图 (Wireframe)、原型 (Prototype) 和视觉稿 (Mockup) 是一个东西:表达自己创意的线框手绘设计稿。

我刚入设计的时候什么也不问就开始了工作,经常听到"让你更自由的去设计吧"。很久一段时间不太明白其中的意味。最后对比交付的线框图和自己的设计时,发现什么也没改变…这次试着从新考虑一下关于线框图和设计的问题。

一.从线框图到设计

如果听到"准确的通过这个再现出来!",基本的表现方法是自由的。请尽情地发挥你的创意吧!

要点1:改变面积

我认为线框图很多布局都是四方形围成的箱子。但是,最近的看到的很多网页设计是宽度填满浏览器的。

例如经常能发现这样的线框图。Logo在左上,右上是菜单。很大的广告框,下面是内容…。这个全部都四边形的线给包裹住。如果按照这个去设计网站,也许就不能看到宽屏的广告图了。

因此广告图的宽度需要充满浏览器,改变设计会让得到更好的感觉。与线框图相比,他的图片也产生了差别。

要点2:改变布置

并非要无视布置的重要度。而是更详细的考虑。

经常在列表页等能看到,图片和标题、概要的列表。怎么样才能更好的关注图片呢?




这个例子是在图片上放置文案。要是没有长文案,这样的布置是有效的。

另外,这样图标和文章组合的布局也能经常看到。像这样的长文本中对齐是相当难以阅读的。

像这样图像在左,文章在右的放置。重要的元素是不能改变的,左对齐的文章提高了可读性,文字更加紧凑。

要点3:改变表现方法

这是在准备线框图阶段的要点。然而,没有参加制作线框图的时候,设计师也会提出各种提案的表现方法。较大的改变是在着手设计之前,交付线框图的时候好好商量。

这里举个实际例子。我去参加一个在海外以成为创意家为目标的Frog School,定期举办短期网页设计和锻炼英语能力的讲座。这里有3个费用的计划,最初是像这样上面包含着这服务和费用汇总之后的文本。

然而实际上像这样的费用表已经改变了。包含的,不包含的很容易就分的清。

也有其他的,能在网站上看到活动提醒的日历。日历想要便利,需要大做文章。这个网站由于是一个月举办3到4次活动,如果反过来来看日历,在设计的时候会浪费掉一定的空间。

像这样改成单纯的活动列表来表示。举办日和举办场地也会很容易分辨。

二.什么都可以改变么?要有必要的理由

像这样按照交付的线框图去设计也还是不行的。必须要是有所谓的设计理由。没有理由的设计只是自我满足。尽可能的对线框图制作人去说明更改的理由?"这样感觉看起来很好"这样的回答通常是不行的。因此全部采用线框图的设计,而自己一点没明白。总觉得按照这样做法去工作的设计师,请慢慢的抛弃这样想法吧。

三.写给制作线框图的人

到这里为止,可以写给设计师。这里开始是写给线框图制作人的。相比为了更快完成设计,有几点还是要拜托的。

不要加入设计元素,简单

关于设计师根据线框图推进设计的重要理由,也会有"线框图制作让人迷惑"的地方。在线框图的阶段,如果留白,字体和颜色都被制定了,设计师会忠实的呈现出来,不会加入很大的改变。但是线框图的目的是优先等级和必要内容的确认。设计师应该更多的丢弃固定的概念去工作,相框图应该是极其简洁的为好。

另外,颜色和字体被指定的情况也是有的,附件作为规范样式也能经常看到。

文本可以作为拷贝粘贴

用Web service和Illustrator等工具制作相框图的人也有很多,其中也有交付打印的相框图。想要更好的推进工作效率,尽可能插入的文本是可以复制粘贴的,很高兴交付的是文件格式。

标记与备注用别的标准

在线框图中插入"标记字体用一栏""重点突出"等等的注释。这样单纯这样做,网站所反映的内容会被混淆看漏。要是使用对话框,或者是改变颜色,这样的内容更容易被理解吧。最近我使用的制作相框图的工具Moqups,在内容加入想要追加的要点,可能这样的浏览方式是相当方便的。

举了几个例子,介绍了线框图与设计,由于这只是一个例子,不能对所有的网站都有效。对于网站用什么样的表现方法去设计是最好的?一边仔细的考虑一边去做设计吧。然后希望成为能自信满满地说 "线框图请交给我吧"的设计师。

以上就是关于线框图和设计的问题详解,对于一些刚入门的线框图设计师来说,这是篇很好的教程,希望能对大家有所帮助!

更多精彩内容其他人还在看

UI设计师必看:详解最全面的组件化开发与设计指南

作为一个UI设计师,设计最重要的一点就是要符合产品功能逻辑,绝不是所谓的“好看”。而组件化的设计理念恰恰是最能帮助设计符合产品功能逻辑的,下面为大家带来详解最全面的组件化开发与设计指南,来看看吧
收藏 0 赞 0 分享

平面设计中相近性的应用技巧

相近性原则也取决于元素在背景上不同位置的放置,从而使人们获得各种不同的信息组合,而最清晰的效果就是利用白色背景来区分这些组合,今天为大家分享平面设计中相近性的应用技巧,来看看吧
收藏 0 赞 0 分享

相似的形状、颜色等其他特性在平面设计中的应用

在设计中相似的特性可以成为我们有力的工具,利用相似性,我们可以使两个相隔较远的元素在信息上联系起来,下面为大家详细介绍相似的形状、颜色等其他特性在平面设计中的应用,来看看吧
收藏 0 赞 0 分享

看看近30年奥斯卡最佳影片海报都长什么样子

今天为大家带来近30年奥斯卡最佳影片海报,看看都长什么样子,统计是从第59届奥斯卡开始的,因为之前的海报都太具有年代感了,对于设计朋友真的很值得过来学习,一起来学习吧
收藏 0 赞 0 分享

SVG格式的图片编辑修改方法

做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
收藏 0 赞 0 分享

如何创造出好设计?教你利用坏图创造出好设计

虽然说一图胜千言,一张好图会说话。但在设计师的实际工作中,甲方不少,好图难得,碰到客户给的是烂图怎么办?还想不想要高端大气了?如果你的回答是肯定的,那就来看一下今天分享的这篇好文,实例分析,不纸上谈兵,文中涉及很多实用技巧,非常值得新手设计师阅读呢。
收藏 0 赞 0 分享

设计师必须知道的17个行业规则

设计这行摸爬滚打十几年,林林总总各行各业的客户接触不少,由于中国应试教育的不足,导致不少人对这一行业工作流程缺乏了解。本文就为设计师总结了17个行业规则,希望作为设计朋友认真阅读,这样在以后的工作中可以少走点弯路
收藏 0 赞 0 分享

如何才能做出有创意的作品 什么是好的创意

作为一名设计师,常常面对各种创意需求,但创意这种东西,在有限的时间之内,常常是没有创意的、没有灵感的,这让许多设计师苦恼抓狂。本文就向设计师朋友介绍如何快速打造有创意的作品的一些方法和发散思维的办法,希望能帮助到大家
收藏 0 赞 0 分享

图文搭配技巧:给照片配上文字的十个方法

图文搭配是是平面设计的基本功。给照片配上文字,与平面排版有相通之处,但因为偏重不一样,所以处理方式截然不同。本教程就为大家介绍十个图文搭配的技巧,教程比较实用,推荐过来与大家一起分享学习,希望大家喜欢
收藏 0 赞 0 分享

UI界面中首字母大写和小写有哪些优缺点呢?

UI界面中首字母大写和小写有哪些优缺点呢?对于很多朋友并不是很清楚,所以下面小编就为大家详细介绍一下,不会的朋友可以参考本文,一起来看看吧
收藏 0 赞 0 分享
查看更多