全国服务热线:0571-88730320

登录/ 注册
您现在的位置是: 首页 > 建站新闻 > Web界面设计模型布局样式

Web界面设计模型布局样式

2020-04-29 10:30:00

1: 卡片

卡片布局可以使网站呈现大量的内容和概括的情况,卡片样式也很流行。

作为一个可点击的信息容器:一个小的预览就足以让用户找到他们需要的信息。每个网站的卡片样式实际上是不同的。其中大部分包含图片和描述。

卡片样式和响应网站是完美的,因为每一张卡片都是独立的,它们可以适应屏幕,无论它们放在哪里。对于内容较多的网站,卡片有很多优点:

·直观-无需解释信息;·响应式设计方便-每个独立卡都能很好地适应屏幕;·易于共享-易于将特定内容共享到社交媒体网站;·通用-适用于所有类型的网站。

要点:

一、整个卡片可以点击,而不仅仅是一部分;2。每张卡片都集中在一个中心概念上。在选择图片时,考虑小屏幕用户的体验,需要针对不同的设备进行定制。它不需要太复杂,简单是卡片的灵魂,基本的图片可以简单的描述。

二:网格

网格结构可以使浏览更容易,卡片通常放在网格中。网格的大小、空间和列号可能会改变。YouTube遵循严格的网格系统,一些网站刻意避免这种直接的风式,比如huffingtonpost:

要点:

一、特别注意白色间隙。差距越大,对每张卡片内容的关注度就越高,但速度可能越慢。2。一致性非常重要,特别是考虑到多屏幕的适应性。确保在每个响应节点上都可以识别布局。三。初学者可以从基本的12列布局开始,并推荐一个工具:960js。

3: 杂志式

这样的网站往往需要更新大量的内容,杂志风格有多变的栏目、卡片、标题,打破单一的网格布局。屏幕左侧通常有卡片,右侧则有文本链接。

以buzzfeed为例:第一列是具体内容,图片旁边有详细描述;中间是即时新闻,图片下面有简单描述;最后一列是排名,对排列的图片没有描述。注意它们的字体:通过改变文本的颜色和大小来创建视觉层次结构。

要点:

一、像印刷杂志一样,这种风格注重图片。在浏览较小的次要图片之前,通常在屏幕中间有一个主图片来吸引用户的注意。此样式通常在一侧放置水平/垂直菜单。

4: 无边界样式

这种风格将极简主义带到了另一个层次,去掉了不必要的视觉元素。与传统的块分割方法相比,这种方法依靠视觉、组合和常识来保持结构。

传统上,网页设计使用线条和高度结构化的布局来呈现信息。无边界样式使内容更加突出,但您需要注意维护视觉层次结构。苹果的网站已经扔掉了所有文字形式的边框和链接。它使用清晰的视觉设计来表达内容关系。

要点:

一、排版对于无边界设计非常重要。大小、字体大小和颜色可以传输信息。苹果使用大文本作为标题,相对较小的文本作为二级描述,蓝色表示链接文本;2。为了防止用户混淆,可以单击大多数元素。如果用户对某个元素感到困惑,大多数用户会点击来测试它是否是交互式的。内容量大的网站很难采用这种风格。

分屏适用于两个同样重要的元素的排版。同时,这两个元素在类型上是相反的,用户必须在开头进行选择。

要点:

一、分屏适用于强对比度。使用相反的特征来区分两边,如不同的颜色、不同的文本大小、不同的图片等。保持独立统一的导航菜单,最好在顶部,适合两个屏幕。分屏方式对内容的扩展不是很友好,不推荐内容较多的网站。

如果网站有很多内容,特别是文字,f模式非常适合。

尼尔森诺曼的视觉跟踪研究显示,用户的内容浏览模式与f或E非常相似。用户将从右上角开始浏览,然后水平浏览,然后转到下一行,直到找到他们感兴趣的内容。

当一个网站有很多内容时,f模型将其组织成水平行,这些行被上下绑定。这个用户的视觉运动铺平了道路,并给了可怕的设计师更多的控制。

要点:

一、把重要的内容放在左右两边。两边的终端是用户开始和结束视觉搜索的地方。短暂的停顿也可以为用户打开思考的空间。在新段落的开头加上吸引人的关键词,并在段落中突出关键词。前两行是最重要的,如果用户在开头没有找到他们想要的信息,他们就会离开;4。在右侧列中显示相关但不相关的内容,这些内容可以看到,但存在于可视化浏览过程之外;

7: Z模式

与f模式一样,z模式布局模仿用户的自然浏览方法。但是,Z模式更适合内容较少的网站。通过对视觉信息的合理布局,Z模式可以捕捉和引导用户的视觉焦点。

用户从左上角开始,然后将视觉移到中间,然后从左下角开始。你可以在中间放一幅画。

要点:

一、强调用行为放在右边:用户在此暂停,然后移动;2。最重要的呼叫行为位于右上角。Z模型可以在同一页面上连续重复,用户可以找到浏览节奏;

8: 对称发射

虽然这种款式很难使用,但经过加工后非常漂亮。通常,中心点会放置许多链接,中心点可以放置公司徽标或公司名称。

要点:

一、这种风格很少见,如果处理得当会吸引用户。把最重要的元素放在中间。在中间点周围放置链接时,不要闭合整个圆。例如,维基百科的上下部分将留空,这将给用户留下一个视觉空间,以保持和减少压力。

9: 不对称

不对称会产生张力和活力——它并不适用于每一个网站,但如果你想让一个网站更具活力,你可以考虑它,并能够清楚地显示重点。

不对称的元素会让眼球移动的更快,合理的使用可以创造出动态的空间。但这种风格在实际中很难使用,很容易导致视觉层次紊乱,平面处理会更难看。

要点:

一、利用色彩突出视觉不对称的效果。为了创造一种不对称但有序的效果,在图片的另一半加上一些单词。但边缘锋利的物体会增加视觉重量,但必须小心使用,因为它们会立即造成视觉不平衡。

JUST FOR YOU

一个网站一千种风格,一个用户一千个哈姆雷特

优帮云企业快速建站让全国中小企业更好、更快拥有企业品牌官网

立即建站
优帮云

致力于网站建设,改变企业营销模式

电话咨询 0571-88730320

联系我们

  • 地 址:杭州市联胜路10号华立云立方
  • 电 话:0571-88730320 17742004931
  • 联 系:方经理
  • Q Q:2885116112
  • 邮 箱:2885116112@qq.com
微信二维码

扫码关注我们