低保真原型的解决了基础内容层面的问题吗?
优采云 发布时间: 2021-04-05 07:07低保真原型的解决了基础内容层面的问题吗?
网站的本质是形式主义。 网站的三个元素是内容,功能和性能。低保真原型解决了基本内容级别的问题,而高保真线框则计划了网站的功能。和性能;内容是网站的最基本,最重要的核心,因此,高保真原型必须在低保真原型的基础上构建,直接详细的页面计划是一团糟
网站的本质是形式主义。 网站的三个元素是内容,功能和性能。低保真原型解决了基本内容级别的问题,而高保真线框则计划了网站的功能。和性能;内容是网站的最基本,最重要的核心,因此高保真原型必须在低保真原型的基础上构建。直接计划页面详细信息是错误的行为。
区分“互动”部分
讨论内容的形式主义不是简单地区分哪些是图片,哪些是文本以及哪些是Flash*敏*感*词*……而是扩展和转换那些与用户互动的内容。这里提到的交互是人与机器之间的交互,对于万维网,是最常见的鼠标响应和键盘响应。
使用颜色标记不同的页面元素类型非常有效,例如:
绿色代表超链接
橙色代表表单项
紫色代表Js效果
使用颜色区分页面的“交互式”部分
区分具有链接的文本和没有链接的文本非常重要。在低保真原型中,您可能会完全忽略它们。但是,对于高保真线框,您必须区分可单击的文本和纯文本。浏览文字;对于标题级文本,应使用较大的字体,并使用浅色背景进行识别;那些未链接的文本段落可以在第一行中用多个灰色背景缩进以表示它们(在实际页面中没有缩进);如果时间充裕,则建议在页面的段落部分填充真实文本。
区分标题,链接文本,文本段落
交互形式之间的区别可以看作是线框图例的补充;该增补程序可能会根据网站的不同需求提供社区,甚至提供一些非常独特的图例,例如计划房地产SNS社区。在此过程中,您甚至可以添加Icon图例。这样做的好处不仅是为其他设计者和实现者提供提示和便利,还使高保真原型“可读”,更接近最终页面结果。
房地产SNS 网站的线框中的图标图例
无处不在的网格系统
网格系统已在网页设计中被广泛采用。网络文章中已经有很多介绍性页面。对于特定的应用,您也可以参考相关的代码96 0. gs;不要以为网格系统仅仅是对视觉设计者的帮助。它在设计高保真线框方面也非常有帮助。像Visio和Axure这样的原型制作软件提供了强大的辅助线和网格对齐支持,使您可以轻松地在线框中实现网格。
在高保真线框中构建网格系统
具有网格系统的高保真原型是最接近真实页面的设计(甚至可以认为选择合理的网格系统是建立高保真线框的第一步),并具有以下三个方面优点:
优势1:通过网格控制屏幕资源
内容形式主义的核心是计划屏幕资源。建立网格系统可以有效地掌握页面的整体和局部大小,提高原型的真实性和适应性。
例如,在基于60像素的网格系统中,它可以与标准屏幕尺寸(800px×600px)兼容,并且整个网站页面样式都提供了强大的缩放比例。
能够适应800 * 600标准屏幕分辨率的线框网格
优势2:轻松实现网站整体图像尺寸规划
将那些具有内容含义的图片(非装饰性图片)发布给经验不足的视觉设计师,这通常会带来灾难性的后果。这也是许多精美设计与实际效果之间存在差异的主要原因。既然您已经决定进行高保真原型制作,那么您必须干预视觉设计级别。内容图片经常随内容而变化,它们更接近交互设计的范围。在某些情况下,视觉设计应该让位。
通常需要根据网格系统的参考宽度来计划2到3个常用的宽高比,并根据页面的需要计划尺寸;该系列照片的尺寸应在高保真线框开始之前。建立网格系统后,就可以将其用于内容填充了。
在整个站点图片大小规划中收录两个固定比例和一个可伸缩比例[单击图片以查看完整图片]
优势3:线框的块级重用
Web设计的灵活性来自计划中的块级重用。通常,某些相关的内容元素可以形成为“内容块”。在页面的生产过程中,这些块可以是div,ol,ul和dl的标记语言;由于网页是垂直扩展,因此,在线框图的高保真设计主要是基于网格系统来规划块级内容的宽度;确定常用宽度后,可以轻松实现“通用移位”,从而减少了设计工作量,提高了团队执行效率(视觉设计师也欢迎这种规划)。
可以根据网格系统灵活组合的“构建基块”内容块
图片还是文字?
如果您使用图片或文字作为内容形式,则应引用缠结的常用词汇
有人曾经断言万维网已进入图像读取时代。在“眼球经济”的影响下,网站希望每个内容元素都得到用户的充分关注,并且越来越多的Web界面将图像用作内容传输的一种形式。这也带来了缓慢的访问速度和搜索引擎优化的难度。何时使用图片以及如何匹配图片和文字是高保真线框的重要部分。
使用图片的利弊分析
优势:直观且引人注目
缺点:增加文件数量需要特殊的搜索优化,这会占用大量屏幕资源
分析使用文本的优缺点
优点:占用屏幕资源少,导入速度快,可读性强
缺点:无聊,不容易分辨
合理的内容格式设计,根据不同的需求和屏幕资源,灵活地使用图形和文本有效地传达信息。
静态图片的内容(小)表示它通常与文本一起显示
静态图片(大)页面的主要视觉效果,需要突出显示细节的视觉内容
动态图像(多媒体)广告(需要特别注意的链接)不应过多
链接文本独立于句子中的内容单元关键词
点击描述性文字之前必须向用户解释的大段文字
标题重要的关键字,重要的主题
在一定意义上,使用图形和文本的搭配来形式化内容,确定内容元素和块所占用的屏幕资源,并从一侧反映它们之间的优缺点关系;在完整合理的页面逻辑的基础上,基于页面元素之间的权重设计高保真线框非常容易。
同一页面元素的六种形式
块级内容变形注意事项
块级内容由元素级内容组成。
在解决了元素级内容的形式化问题之后,根据网格系统对块级内容的多样化集成可以使页面线框图像像构建块一样简单;相同的块级元素位于不同的页面上,这些页面通常占有不同的权重,这意味着屏幕资源的变化(影响此变化的主要因素是宽度),因此,相同的块级元素需要采用不同的形式在集成网站中。
以“相同主题链接列表”中最常见的内容块为例,解决不同屏幕资源分配下的变形问题;所谓“相同主题链接列表”可以是一系列的文章,也可以是围绕某个主题的一系列关键词,简而言之,是相同级别的相关内容节点;这些兄弟节点所属的某个主题以页面上标题的形式反映出来。
简单风格
图形列表
单列扩展
两栏式混搭
两栏文字样式
最简单的图形样式
以上六种扩展形式只是从一个内容块派生而来;为了形成较高的块级重用,必须对每个内容块进行类似的扩展;就像许多重复性任务一样,只要设计人员通过案例积累常见的块级内容形式,他们就不必为每个项目都那么努力。在高保真线框的设计水平上,实际上只是对这些形式的合理使用。
为了适应同一内容块的不同形式,设计人员和开发人员经常在内容发布过程中进行相应的改进,例如手动或自动截取不同长度的标题和链接文本。