网页设计三要素,帮你奠定设计项目基础的线框

作者: 摄影方法  发布:2019-09-25

图片 1

许多设计项目是从线框图的设计开始的,但是真正专业的线框图到底要经历哪些步骤呢?今天这篇来自UXPin设计师Faye Bridge的文章,帮你总结了一套实用的线框图设计五步法,帮你从最早的阶段奠定整个项目的基础。

原文出处: Teamtreehouse - Faye Bridge   译文出处:[优设网

网站的本质就是形式主义,内容、功能、表现这三个网站的要素,低保真原型解决了基础内容层面的问题,而高保真线框图规划了网站的功能和表现;内容是网站最基本最重要的核心,因此高保真原型必须建立在低保真原型的基础上,直接进行页面的细节规划是一种本末倒置的错误行为。

想要让整个数字产品或者设计项目结构化,线框图是它最早也是最重要的组成部分。线框图向整个团队展示了布局、导航、视觉层次、信息架构和内容优先级等关键的问题,它勾勒出了整个项目的基本轮廓,呈现了关键信息。

  • @陈子木]()   

区分可交互的部分

而今天的文章会帮你了解提升线框图设计品质的所需要知道的一切。继续读下去,你会知道线框图为什么这么重要,不同的工具要如何使用,并且如何通过一步步的操作最终完成线框图的设计。

想要让整个数字产品或者设计项目结构化,线框图是它最早也是最重要的组成部分。线框图向整个团队展示了布局、导航、视觉层次、信息架构和内容优先级等关键的问题,它勾勒出了整个项目的基本轮廓,呈现了关键信息。

讨论内容的形式主义,并非要简单的区分哪些是图片,哪些是文字,哪些是Flash动画……而是要将那些用户可交互的内容进行延展和变换;在这里谈及的交互就是人与机器的互动,对于万维网而言,最常见的就是鼠标响应和键盘响应。

线框图为何如此实用

而今天的文章会帮你了解提升线框图设计品质的所需要知道的一切。继续读下去,你会知道线框图为什么这么重要,不同的工具要如何使用,并且如何通过一步步的操作最终完成线框图的设计。

使用颜色对不同的页面元素类型进行标注是十分有效的方法,比如:

在形式上,线框图使用了大量的占位符,比如带标记的框图,它们随后会被实际的内容填充起来。在绝大多数情况,设计师会出于下面的考虑来使用和设计线框图:

线框图为何如此实用

在形式上,线框图使用了大量的占位符,比如带标记的框图,它们随后会被实际的内容填充起来。在绝大多数情况,设计师会出于下面的考虑来使用和设计线框图:

·结构化的设计:在细化到具体技术细节之前,明确整个界面的运作方式和交互走向
·构建基础:导航和布局的搭建几乎决定了整个项目的大体走向。如果有亟待解决的问题,最好打一开始就着手解决,而不是到高保真原型阶段再寻求方案。
·以内容为中心的设计:线框图的设计思路是以内容为中心,它鼓励你思考页面哪些部分更重要,进而设计合理的布局。
·更多的创意和尝试:由于线框图足够简单,这意味着你可以更容易创建,不用耗费太多精力便可尝试不同的思路,拿出多种多样富有创意的方案。

线框图是设计的框架。

绿色代表超级链接

结构化的设计:在细化到具体技术细节之前,明确整个界面的运作方式和交互走向

线框图设计思路

线框图的设计并没有一种固定的形态,你可以在图片编辑器中完成,也可以通过专门的线框图工具来制作,甚至可以直接在纸上绘制。接下来,我们看看各种不同方式的优劣。

·纸:最基本的线框图和草图也相去不远。如果你想尝试探索不同的思路来寻求最佳的方案,你可以忽略视觉的精准度,在纸上快速勾勒出来以做探索。

图片 2

来源:UXPin

·专业平台:诸如UXPin这样的可以制作线框图和高保真原型的设计平台,它们大多适宜于团队协作。

图片 3

来源:UXPin

·展示软件:如果你不想使用使用UXPin这类收费的平台,也可以使用Keynote 和Powerpoint 这样的软件来展示。好处自然是更加省钱,但是缺点是它们多数时候必须通过邮件来回传递再做编辑,沟通和设计成本都偏高。

图片 4

来源:Keynote

·图片编辑器:有些设计师喜欢在Photoshop和Sketch这样的图片编辑软件中搞定一切设计问题。如果你也是这类工具的重度用户的话,创建线框图所用的形状和视觉元素绝对够轻松。不过要记住,后续的高保真原型你需要重新创建(在UXPin这类工具中则不然,线框图在后续创建高保真原型的时候是可以复用的)。

媒介的选取仅仅只是个开始,接下来我们看看设计的具体步骤。

橙色代表表单项目

构建基础:导航和布局的搭建几乎决定了整个项目的大体走向。如果有亟待解决的问题,最好打一开始就着手解决,而不是到高保真原型阶段再寻求方案。

线框图5步流程

虽然线框图的设计并没有一个标准规范,但是我们发现下面的五步设计流程是最实用的:

1、内容清单
2、视觉层次
3、内容线框图
4、打磨线框图
5、 class="wp_keywordlink_affiliate">低保真原型

图片 5

接下来我们看看每个步骤都是怎么操作的。

紫色代表Js效果

以内容为中心的设计:线框图的设计思路是以内容为中心,它鼓励你思考页面哪些部分更重要,进而设计合理的布局。

1、内容清单

首先你得创建一个内容清单,其中聚合了所有相关的素材,在创建线框图之前得合理地整理起来。

图片 6

来源:Maadmob

内容清单最好是制作成为电子表格,其中根据页面来划分,将所有需要单独呈现的内容都清楚地罗列出来。内容清单有助于你进行以内容为中心的设计,在这样的思路下,你会更精准的判断哪些元素更加重要。

最好是按照下面的流程来制作内容清单:

·列出所有的内容,附上URL和简短的描述
·根据主题组织整理出内容条目
·将每条内容条目分配到最合理的页面,将出现在多个不同页面上的内容条目标注出来
·筛选出冗余内容,将你不需要的内容删除掉,你删除掉的内容越多,那么你留下的内容就越有价值
·如果你愿意的话,可以将你的团队分割为不同的小组,并且将特定的人分配到特定的页面或者目录

接下来,你需要基于你的内容列表来创建视觉层次。

图片 7

更多的创意和尝试:由于线框图足够简单,这意味着你可以更容易创建,不用耗费太多精力便可尝试不同的思路,拿出多种多样富有创意的方案。

2、视觉层次

当你的内容清单整理出所有可用的条目之后,再筛选出每个页面的优先级就不难了。

随后,你可以在电子表格中按照优先级的高低,分别标记出每个项目一级、二级和三级的内容条目,而这就是我们要的视觉层次的划定依据了。

图片 8

使用颜色对页面可交互部分进行区分

线框图是设计的框架。

3、内容线框图

这个部分将会将你之前所规划的内容划分到不同的区块当中去。

图片 9

正如同UXPin所创建的案例,内容线框图仅仅是关乎内容的走向,而非展示方式。如果你的工具支持,栅格系统可以很好的帮到你,尤其是当多个页面都牵涉到相同的布局之时。

图片 10

线框图在绝大多数情况下都同移动端优先的设计相适应。当你的线框图要优先适配小屏幕的时候,只需要优先考虑最重要的部分,然后随着尺寸的增加而添加细节和元素。另外一种处理方式是打一开头就将所有元素都设计出来,然后随着屏幕尺寸的缩小而对元素进行删减,但是这种方法的问题在于,费时费事,而且容易让界面元素之间出现割裂。

区分有链接的文本和无链接文本是非常重要的工作,在低保真原型中你可能完全可以不理会它们,然而对于高保真线框图则必须区分哪些文本是可以点击的,哪些纯浏览文本;对于标题级的文本,应该使用较大字体,同时赋予一个浅色的背景进行标识;那些没有链接的文字段落,可以使用首行缩进的多条灰色背景代表它们(真正的页面中可以没有缩进);如果时间充裕,更推荐以真实的文字去填充页面中的段落部分。

线框图设计思路

4、打磨线框图

完成了基本结构的搭建之后,下一步就是要将它们塑造成可识别的组件。这意味着你需要为图片预留空间,考虑链接和图标的交互走向,并且计算各个组件之间的尺寸比例。

当然,千万要控制好度,不要设计得太过细致。线框图本质上还是界面的框架,其中的控件是占位符,不用做的那么精确。

图片 11

当然,在打磨线框图细节的过程中,也别忘了用户流程的设计。在这个阶段,你可以适当地将交互和设计模式纳入到其中,并且更准确地定义整个界面的视觉层次。

图片 12

线框图的设计并没有一种固定的形态,你可以在图片编辑器中完成,也可以通过专门的线框图工具来制作,甚至可以直接在纸上绘制。接下来,我们看看各种不同方式的优劣。

5、低保真原型

我们强烈建议当你设计好线框图之后,将其转化为低保真的原型,这样你就可以尽早开始测试。

图片 13

挑对了设计平台,你可以轻松地基于线框图来加入交互,许多优秀的工具甚至可以通过简单拖放来实现这一点。即使你的低保真模型仅仅具有最基本的交互,也可以及早地帮你造出可用性问题,特别是在整体布局和导航上。

快速原型设计的思路核心在于尽可能快地完成原型设计,加入交互,开始测试,然后获取反馈,迭代升级。这种思路之下,你无需一次完成全部的测试内容,而是逐步完成,分段完善的。

随着低保真原型的逐步推进,你的整个项目的基础就逐步完善了起来,随后,你便可以开始移动端的视觉设计了。

2 赞 1 收藏 评论

区分标题、有链接文本、文字段落

纸:最基本的线框图和草图也相去不远。如果你想尝试探索不同的思路来寻求最佳的方案,你可以忽略视觉的精准度,在纸上快速勾勒出来以做探索。

对交互形式进行区分,可以看作对线框图图例的一种补充;这种增补可能根据不同网站的需要有所社区,甚至提供一些非常独特的图例,比如在规划一个房地产SNS社区的过程中,甚至可以增加Icon图例,这样做的好处不仅仅是给其他设计实现人员以提示和方便,并且使得高保真原型具有可读性,更趋近于最后的页面结果。

图片 14

图片 15

来源:UXPin

某房地产SNS网站线框图中的Icon图例

专业平台:诸如UXPin这样的可以制作线框图和高保真原型的设计平台,它们大多适宜于团队协作。

无处不在的栅格系统

图片 16

栅格系统已经在网页设计中被普遍的采纳,网络中已经有诸多的介绍性文章,更可以参考960.gs的相关代码进行具体的应用;不要以为栅格系统只对视觉设计师有帮助,在高保真线框图的设计中同样可以获得非常大的帮助;类似Visio和Axure这样的原型设计软件都提供了强大的辅助线和网格对齐支持,能够让你轻松的实现线框图中的栅格。

来源:UXPin

图片 17

展示软件:如果你不想使用使用UXPin这类收费的平台,也可以使用Keynote 和Powerpoint 这样的软件来展示。好处自然是更加省钱,但是缺点是它们多数时候必须通过邮件来回传递再做编辑,沟通和设计成本都偏高。

在高保真线框图中建立栅格系统

图片 18

带有栅格系统的高保真原型是最接近真实页面的设计(甚至可以认为选择合理的栅格系统是建立高保真线框图的第一步骤), 具有以下三个优势:

来源:Keynote

优势一:通过栅格控制屏幕资源

图片编辑器:有些设计师喜欢在Photoshop和Sketch这样的图片编辑软件中搞定一切设计问题。如果你也是这类工具的重度用户的话,创建线框图所用的形状和视觉元素绝对够轻松。不过要记住,后续的高保真原型你需要重新创建(在UXPin这类工具中则不然,线框图在后续创建高保真原型的时候是可以复用的)。

内容形式主义的核心就是对屏幕资源进行规划,建立栅格系统能够对页面的整体和局部尺寸进行有效的把握,提高原型的真实度和适应性。

媒介的选取仅仅只是个开始,接下来我们看看设计的具体步骤。

例如,在以60像素为基准的栅格系统中,可以实现适应标准屏幕尺寸(800px×600px)的兼容,整个网站的页面风格提供强大的伸缩。

线框图5步流程

图片 19

虽然线框图的设计并没有一个标准规范,但是我们发现下面的五步设计流程是最实用的:

能够适应800*600标准屏幕分辨率的线框图栅格

1、内容清单

优势二:轻松实现整站图片尺寸规划

2、视觉层次

将那些具有内容意义的图片(非装饰图)放手给没有经验的视觉设计师,往往会带来灾难性的后果,这也是很多看起来很美的设计与实际效果相差悬殊的主要原因;既然已经决定进行高保真原型设计,就肯定要对视觉设计层面的工作进行干预;内容图片是伴随内容经常更换的,本身更贴近交互设计的范畴,在某些时候,视觉设计应该合理让路。

3、内容线框图

基于栅格系统的基准宽度,通常需要规划2~3个常用的宽高比例,并且按照页面的需要进行尺寸的规划;这一系列的图片尺寸应该在高保真线框图开始之前,栅格系统确立之后,就准备妥当,用来做内容填充时使用。

4、打磨线框图

图片 20

5、低保真原型

包含两个固定比例和一个可伸缩比例的整站图片尺寸规划[图片点击可看全图]

图片 21

优势三:形成线框图的块级复用

接下来我们看看每个步骤都是怎么操作的。

网页设计的灵活源自规划中的块级复用。通常可以把某几个相关的内容元素形成一个 内容块,在页面的制作过程中,这些块可能是一个div、ol、ul、dl级的标记语言;由于Web页面是一种纵向的延展,因此在线框图的高保真设计中主要是依据栅格系统对块级内容的宽度进行规划;在常用宽度确定之后,就可以轻松的实现乾坤大挪移,缩减设计工作量,提高团队的设计执行效率(视觉设计师们也很欢迎这种规划)。

1、内容清单

图片 22

首先你得创建一个内容清单,其中聚合了所有相关的素材,在创建线框图之前得合理地整理起来。

按照栅格系统建立的可以灵活组合的积木式内容块

图片 23

图还是文?

来源:Maadmob

使用图片还是文字作为内容形式,就应该引用一个时下流行的词汇——纠结

内容清单最好是制作成为电子表格,其中根据页面来划分,将所有需要单独呈现的内容都清楚地罗列出来。内容清单有助于你进行以内容为中心的设计,在这样的思路下,你会更精准的判断哪些元素更加重要。

曾经有人断言万维网进入了读图时代,在眼球经济的影响下,网站渴望每个内容元素都得到用户的充分关注,越来越多的Web界面使用图片作为内容传达形式,这也带来了访问速度缓慢和搜索引擎优化的难度;什么时候使用图片,如何进行图文搭配,是高保真线框图的一个重要环节。

最好是按照下面的流程来制作内容清单:

使用图片的优劣势分析

列出所有的内容,附上URL和简短的描述

优势:直观,吸引关注

根据主题组织整理出内容条目

劣势:增加文件量,需要特别的搜索优化,占用屏幕资源比较大

将每条内容条目分配到最合理的页面,将出现在多个不同页面上的内容条目标注出来

使用文字的优劣势分析

筛选出冗余内容,将你不需要的内容删除掉,你删除掉的内容越多,那么你留下的内容就越有价值

优势:占用屏幕资源少,导入速度快,可读性强

如果你愿意的话,可以将你的团队分割为不同的小组,并且将特定的人分配到特定的页面或者目录

劣势:乏味,不易区分

接下来,你需要基于你的内容列表来创建视觉层次。

合理的内容形式设计,根据不同的需要和屏幕资源,灵活的使用图文搭配进行信息有效传达。

2、视觉层次

静态图片(小)内容示意,通常搭配文本出现

当你的内容清单整理出所有可用的条目之后,再筛选出每个页面的优先级就不难了。

静态图片(大)页面主视觉、需要突出细节的视觉内容

随后,你可以在电子表格中按照优先级的高低,分别标记出每个项目一级、二级和三级的内容条目,而这就是我们要的视觉层次的划定依据了。

动态图片(多媒体)广告、特别需要注意的环节,不宜过多

图片 24

链接文字独立成句的内容单元、关键词

3、内容线框图

描述性文字在点击之前,必须向用户进行解释的大段文字

这个部分将会将你之前所规划的内容划分到不同的区块当中去。

标题重要关键字,重要主题

图片 25

使用图文搭配进行内容形式化,从某某意义上说决定了内容元素和分块占用的屏幕资源,从一个侧面反映了它们之间的强弱关系;在完善且合理的页面逻辑架构基础上,根据页面元素之间的权重进行高保真线框图设计,是一件非常轻松的事情。

正如同UXPin所创建的案例,内容线框图仅仅是关乎内容的走向,而非展示方式。如果你的工具支持,栅格系统可以很好的帮到你,尤其是当多个页面都牵涉到相同的布局之时。

图片 26

图片 27

线框图在绝大多数情况下都同移动端优先的设计相适应。当你的线框图要优先适配小屏幕的时候,只需要优先考虑最重要的部分,然后随着尺寸的增加而添加细节和元素。另外一种处理方式是打一开头就将所有元素都设计出来,然后随着屏幕尺寸的缩小而对元素进行删减,但是这种方法的问题在于,费时费事,而且容易让界面元素之间出现割裂。

4、打磨线框图

完成了基本结构的搭建之后,下一步就是要将它们塑造成可识别的组件。这意味着你需要为图片预留空间,考虑链接和图标的交互走向,并且计算各个组件之间的尺寸比例。

当然,千万要控制好度,不要设计得太过细致。线框图本质上还是界面的框架,其中的控件是占位符,不用做的那么精确。

图片 28

当然,在打磨线框图细节的过程中,也别忘了用户流程的设计。在这个阶段,你可以适当地将交互和设计模式纳入到其中,并且更准确地定义整个界面的视觉层次。

5、低保真原型

我们强烈建议当你设计好线框图之后,将其转化为低保真的原型,这样你就可以尽早开始测试。

图片 29

挑对了设计平台,你可以轻松地基于线框图来加入交互,许多优秀的工具甚至可以通过简单拖放来实现这一点。即使你的低保真模型仅仅具有最基本的交互,也可以及早地帮你造出可用性问题,特别是在整体布局和导航上。

快速原型设计的思路核心在于尽可能快地完成原型设计,加入交互,开始测试,然后获取反馈,迭代升级。这种思路之下,你无需一次完成全部的测试内容,而是逐步完成,分段完善的。

随着低保真原型的逐步推进,你的整个项目的基础就逐步完善了起来,随后,你便可以开始移动端的视觉设计了。

本文由澳门百老汇游戏网址发布于摄影方法,转载请注明出处:网页设计三要素,帮你奠定设计项目基础的线框

关键词: