ACCESSIBLE
WEBSITE DESIGN

触手可及的网页设计

触手可及

网页设计系列课程

教学·互联网原型设计

关于课程

H-1-H-Design创始人戴砚亮老师在中央财经大学交互设计实验室互联网设计课程中针对纸模网页层级的设计作业进行了讲评。针对不同的网页层级设计提出了视觉类网站和功能性网站的不同特点。

同学们充分利用了手工作业的优势,将手工制作形式发挥到了极致。将每一个网站模块进行最大化的解构。然后通过立体泡沫胶,将网站的层级秩序按照重要性和视觉观看秩序依次进行了不同高度的区分制作。通过这样的方式我们就会很清晰的发现,原本在屏幕上看着“平平”的网页瞬间就有了很直观的视觉变化。我们发现,优秀的网站确实在页面观看秩序上做到了很明确的区分。

通过面积和颜色的对比来进行区分,又或是通过位置和疏密进行区分。这些细微的,我们平时在观看网站时不经意的结构层级在纸模立体化展示后,得到了异常清晰直观的呈现。

同学们也在完成作业后感叹,原来互联网设计中的的确确存在着辛苦的“幕后工作”,作为设计师,必须要认真的研究用户体验,用户心理学等等的内容,才可能完成优秀的产品。

同时,同学们还将网站用线框图或是原型图的方式进行提取,力求最大可能的还原产品设计原型阶段的过程,这个训练也非常有助于训练同学们的视觉思维方式。
我们从小接受的更多是文字逻辑阅读,或是思维逻辑阅读;也就是通过文字的内容转换为大脑可以反应的信息,再进行接受和消化。但是作为视觉设计而言,我们必须能够做到用视觉思维去判断视觉产品。只有我们自己熟练的掌握了视觉思维的思考方式,才可能将视觉作品设计成为最适合于人们阅读的呈现方式。

在这个训练中,同学们学会了从纷繁的视觉设计界面中,提取出视觉结构,从而了解设计师是通过何种视觉秩序,如何向用户展示设计内容的。

我们可以很清晰的发现,一些优秀的网站设计中对于视觉秩序的把握还是很考究的。要做到视觉秩序的良好建立,需要了解两个要点。
① 不要让用户去尝试完全陌生的东西
② 尽可能突出视觉主体,减轻信息结构

线框图要明确设计的三个要点

1:内容大纲(什么内容) 2:信息结构(层级关系) 3:用户的交互行为(怎样操作)

网页表现的大趋势

第一层级:网站首页多为全屏背景图,承载少量关键的功能性信息
第二层级:功能性的信息模块
第三层级:阅读类的文字信息

MORE