zoukankan      html  css  js  c++  java
  • 第五章网页版式设计

    5.1网页版式设计的形式原理

      重复与交错,节奏与韵律,对比与均衡,对比与调和,
      比例与适度,变异与秩序,虚实与留白,力场与结构,
      统一与变化等形式美构成法则来规划版面。

    5.2网页版式设计的视觉因素

    人的视线移动规律
      1)人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳
      2)视线的变化习惯于从左到右、从上到下和顺时针转动
      3)当视线既不沿水平,也不沿垂直的斜线方向移动时,在水平方向上下约45°的范围视线从左到右移动,在垂直方向左右约45°的范围内,视线为从上到下移动

    5.2.1符合视觉规律
    1.文字横向编排
    2.重要信息置于“最佳视觉区域” 

      版面上部有轻快、上升、积极、愉悦之感;
      下部有沉重、稳定、压抑、消沉之感;
      左侧感受轻松、舒展、自由、主动;
      右侧感觉庄重、局限、拘谨、被动。

    5.2.2避免感觉视觉疲劳
    1.限制网页长度
      尽可能将网页限制在一屏以内(即满屏)
      页面不宜过长,一般控制在1-3屏,尽量不超过5屏
      提供到页首、页底的定位链接,方便快速定位浏览

    2.文字大小适中,行距合理

    3.位置一致
      减少交互的次数,按照人们的阅读习惯,固定导航的位置,免去用户去找导航的麻烦

    4.适量安排多媒体元素

    5.合理配色

    5.2.3注重主从关系
      1.大小对比
      2.留白
      3.色彩对比
      4.重复
      5.斜线和曲线

    5.2.4合理视觉流程
    1.方向关系视觉流程
    1)单向
      first:竖向视觉流程:具有直观、坚定、沉稳的感觉。
      second:横向视觉流程:具有令人恬静、稳定、安详的感觉。
      third:斜向视觉流程:具有不稳定,活泼感,能引起人的注意力的感觉

    2)曲线
      曲线流程具有节奏感、扩张感、饱满感、韵律感和曲线美,较为含蓄、微妙和复杂
      常见的曲线形式有S型,C型。

    3)回旋
      回旋视觉流程是指网页上形成迂回旋转贯通的力,使线与线、面与线之间产生一股无形的空间运动,具有视觉扩张和膨胀的空间视觉冲击力。

    2.反复
    3.重心
    4.导向
    5.散点

    5.2.5一致导航

    5.3网页版式构成的类型

    5.3.1骨骼型
    5.3.2国字型
    5.3.3拐向型

    5.3.4框架型
      1.左右框架型
      2.上下框架型
      3.综合框架型

    5.3.5满版型

    5.3.6分割型
      图文分割

    5.3.7中轴型

    5.3.8流线型

    5.3.9倾斜型

    5.3.10对称型

    5.3.11焦点型
      中心
      向心
      离心

    5.3.12自由型

    5.4网页导航设计
    5.4.1网页导航分类
      1.主栏目导航
      2.二级栏目导航
      3.快速导航
      4.相关链接导航

    5.4.2导航位置
      1.顶部
      2.左侧
      3.右侧
      4.中部
      5.下部

    5.4.3导航方向
      1.横排导航
      2.竖排导航
      3.倾斜导航

  • 相关阅读:
    Springboot + Caffeine 实现本地缓存
    springboot + mybatis-plus + sharding-jdbc 实现单库分表
    工厂模式+策略模式 使用
    JAVA 金额自动除以100,精确到分
    spring aop + 自定义注解实现本地缓存
    springboot 使用 retry重试机制
    Mybatis-plus 自动注入公共字段
    docker 安装kafka
    ES 实现聚合分页
    Authentication token manipulation error 及 mongodb WiredTigerLAS.wt 文件过大问题
  • 原文地址:https://www.cnblogs.com/liao13160678112/p/6439962.html
Copyright © 2011-2022 走看看