股票论坛个人日志——第三周:前端设计之网站首页+注册登录界面

说明:从本周开始,个人日志里边就不再涉及团队工作和项目的整周进度了,因为团队日志里边已经有了很好地说明。
链接在这里https://blog.csdn.net/Seb_Veeeettle/article/details/105749143

个人工作

  • 登录界面的改善
  • 项目网站首页的设计
  • 大量JavaScript技巧的初步尝试

心得体会

前端的设计的确是需要一些美学概念的,之前一直都是一些局部东西的前端页面设计,局部功能的确没有考虑到整体,当然实现的逻辑也有些问题,这里先不讨论,因为最初框架的界面不是自己做的。当做整个主页的设计的时候,布局、色彩、字体、细节上的凸显都是需要逻辑的,不说多么美,至少是合理的和赏心悦目的,同时也需要和功能特点进行契合。后边的开发过程中也需要对这些进行提前的考虑,下边是一些具体总结。

重要规范

一致性 Consistency

与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;

页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程:设计简洁直观的操作流程;

清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;

帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

可控 Controllability

用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;

结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

设计原则

以下是对基本设计原则的概述,每一个优秀的设计中都应用了这些设计原则,它们相互关联,只应用某一个原则的情况很少。(出自《写给大家看的设计书》)

对比(Contrast)

对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注意,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。

重复(Repetition)

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。

对齐(Alignment)

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

亲密性(Proximity)

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

导航设计原则

航可以解决用户在访问页面时:在哪里,去哪里,怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。

选择合适的导航

选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确),以下是「侧栏导航」和 「顶部导航」的区别。

侧栏导航

可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

一级类目

一级类目

适用于结构简单的网站:只有一级页面时,不需要使用面包屑。

二级类目

二级类目

侧栏中最多可显示两级导航;当使用二级导航时,我们建议搭配使用面包屑,方便用户定位自己的位置和快速返回。

三级类目

三级类目

适用于较复杂的工具型后台,左侧栏为一级导航,中间栏可显示其对应的二级导航,也可放置其他的工具型选项。

顶部导航

顺应了从上至下的正常浏览顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度。
适用于导航较少,页面篇幅较长的网站。

Container 布局容器

用于布局的容器组件,方便快速搭建页面的基本结构:

外层容器

  • 顶栏容器
  • 侧边栏容器
  • 主要区域容器
  • 底栏容器

布局和导航是产品的骨架,是页面的重要构成模式之一,是作为后续展开页面设计的基础,可以为产品奠定交互和视觉风格。

几种布局的概念

1、静态布局(Static Layout)

即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;

意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;

2、弹性布局

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。

其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下:

flex-flow: ||

flex-direction: row(初始值) | row-reverse | column | column-reverse

flex-wrap: nowrap(初始值) | wrap | wrap-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向,默认是row,即行内方向(一般而言是由左往右,但注意这个和书写模式有关)。

flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。

两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式,下面的例子很直观的说明了各个属性值的区别:

3、自适应布局(Adaptive Layout)

自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。

你可以把自适应布局看作是静态布局的一个系列。

就是说你看到的页面,里面元素的位置会变化而大小不会变化;

4、流式布局(Liquid Layout)

流式布局(Liquid)的特点(也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

5、响应式布局(Responsive Layout)

参考栅格系统

分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

在线可视化布局系统

http://www.bootcss.com/p/layoutit/#

你可能感兴趣的:(金融软件工程,javascript,css,html5,前端)