收藏是种习惯,点击 我的资料库 查看收藏的全部资料
关注作者
关注作者
您可能还需要

网站设计中的线框图是什么?

线框图对于决定用户怎样跟界面交互有十分重要的作用。

绘制网站的线框图是开发设计网站的第一步。也是网站视觉外观进行初步表达的一种形式。它是网站建设项目进行中的蓝图,用来传达策划和设计思想,用来表现网页的布局和核心元素。更深层次地讲,线框图对于决定用户怎样跟界面交互有十分重要的作用。

什么是线框图?

网站线框图(Wireframe)通俗来讲就是网站框架的草图,是网站设计师将客户需求图形化的一种展现形式。线框图是低保真的设计图,用于表达:

内容大纲(什么东西)

信息结构(在哪)

用户的交互行为描述(怎么操作)

框线图是什么样子?

网页设计中的框线图-图片来源:picjumbo.com

网页设计中的框线图-图片来源:picjumbo.com

根据不同的表达和沟通需要,线框图可以从复杂到简单。下图是一个企业网站的简单线框图,用于表达页面布局:

网页设计线框图-新龙制作

线框图设计很重要,可以让设计师把注意力集中在规划排版和界面的交互上,而不受颜色、字体选择甚至内容的干扰。

为什么需要使用线框图?

在项目设计初始阶段,需要关注网站的功能、信息架构、用户体验、用户交互流程、可用性等因素,线框图在此发挥巨大作用。网站建设公司能够使用线框图表达网站的核心功能和信息布局,以及用户交互和增强用户体验,并与委托方进行沟通。

线框图常常用来作项目方案说明,它是与客户进行设计沟通的工具。这种抛开视觉表现的骨架能够帮助双方明确网站核心部分,建站客户因此能够了解网站设计公司的主要策划思想并参与到项目讨论中。

不仅仅是大型网站在设计阶段需要投入时间和精力制作线框图,对于中小企业建设网站项目线框图在网页设计中的重要性也是不容忽视的,如果省去线框图绘制将可能造成后期大量修改,延误交付时间。

建站客户应如何审阅线框图?

当客户审阅线框设计时,请注意:

信息架构:从上到下查看信息架构流程和线框上显示内容的优先级。

内容策略:在线框图阶段,会采用有意义文字描述板块标题,但对细节局部的图文是采用框线代替图片及替代文字占位表示。

页面布局:页面布局是否满足您的需要?如果是的,请确保再次询问该布局是否仍然有意义。通过审阅线框图可以拾起遗漏,使方案更加完善。

功能性:查看网站功能性元素是否放置在合适的位置。比如行动号召按钮是否放置在访问者的主要视线范围内?社交媒体分享按钮是否使用顺手(把社交媒体按钮放在屏幕左侧肯定没有放在右侧好用)?

用户交互:站在访问者角度考虑如何更便捷地使用网站。导航的结构是否复杂?访问者需要点击多少次才能联系到网站管理员?产品详情是否埋藏太深?网站是否看起来简单明了?等等。

(来源:newloong)
以上内容属作者个人观点,不代表雨果网立场!本文经原作者授权转载,转载需经原作者授权同意。

分享到:

0
评论
服务商/观察员评论
最新评论
最新 热门 专题 直播 雨课 选品 服务 标签
newloong
微信:newloong07,专注于高性能营销网站建设,无论PC端还是手机访问速度极快。十多年外贸网站建设经验,擅长WordPress,追求高网站转化率。
阅读数
7.1k
粉丝数
1
文章数
33
跨境导航

收藏

0

0

分享

我要爆料

下载App

意见反馈

返回顶部

X
请正确填写手机号码或邮箱!
请输入内容
发送

扫描二维码
下载雨果网APP

©2013 雨果网 闽ICP备11004599号-1
意见反馈
联系信息:
反馈问题:
问题详情:
我要爆料
联系信息:
爆料详情:
微信公众号
扫描下方二维码或者搜索微信公众号名称,获取最新最全内容
雨果网
雨果网
跨境进口
跨境进口
雨课
雨课
CCEE优品全球
CCEE优品全球
微信小程序
扫描下方二维码或者搜索微信小程序名称,获取最新最全内容
雨果网小程序
雨果网小程序
雨课小程序
雨课小程序
CCEE小程序
CCEE小程序