web UI设计理论入门学习笔记

2017-05-31 本文已影响845人小可乐呀

没找到其他的图。用一下. iPhone 5的UI设计 ╮(￣￣")╭

UI即User Interface，用户界面，人与机器相互交流的一个媒介

WUI，web UI 网页用户界面，注重以人为中心。有以功能为主的界面，和以用户为主的界面。

设计网站时要考虑用户的屏幕尺寸和分辨率

网站分类：1、门户网站（网易、搜狐、新浪、腾讯）2.信息分类网站（58、赶集）3.交易类网站（京东、天猫）4.娱乐性网站（4399）5.个人博客6.论坛社（区）7.行业类网站8.企业网站9.机构网站10.功能性网站

不同的网站的设计要点不同

网页都由模块构成。模块是网页界面布局中最小的单位，展现不同类别的信息，具有特定功能。

常见的模块：导航【导航与搜索框的区别】、新闻、首页焦点图（banner）即大型的活动、搜索、版权

web标准化布局的三个组成部分：html（结构） css (样式) javascript(行为）

web标准化布局原理：1、把网页看成多个网格；2、先有行再有列（从上到下）；3、先做容器再做内容（从外到内）

设计维度：版式【根据产品属性和风格来决定】、色彩、图片、字体、段落、细节

界面设计流程：

板式：需求分析 - 绘制草图

制作：1、优化板式结构

2、填充内容

3、样式设计（字体大小、颜色、图片边框等）

输出：1、优化（检查等）

2、切图（与前端沟通需要如何切，或者前端自行切）

3、输出（命名、打包等）

基本规范：产品设计初期的定下的基调。是设计师、开发运营等等都要遵守的准则，比如说网页的主色调。

例子，知乎主色调

字体的选择：衬线字体，无衬线字体；字体的选择要考虑用户的系统是否能加载出来。解决方法有两，一是使用不同的样式的

相同普通字体可以达到想要的效果，样式（大小颜色背景色等）进行权重的区分；二是、使用在线字体，CSS3中的web fonts功能，

网页中可以使用安装在服务器端的字体，用css3的@font-face属性来调用。

颜色：以色块区分来处理板块的节奏，使用户不容易视觉疲劳。

色彩心理学，颜色都有属于自己的形象，比如绿色代表安全，蓝色代表沉稳、理智、科技感、数字。红黄色奔放

通过色彩来传达一些内容

web中的格式：

jpg:色彩丰富、对设备和系统平台适应性强、通用性强，对比GIF和PNG的尺寸要大些

GIF：动态、静态、可透明底、体积小，表情常用

PNG：初衷是替代GIF和TIFF，体积小，透明底，开发常用，在网页设计中最常用，精度够的话也无什么毛边什么的

FLV:视频传播格式，体积小，增长最快最广泛

MP3：大幅度缩小音频体

视觉层次：塑造出来的空间视觉效果（突出要被用户注意的地方）

透视，近大远小，距离的纵深感。近实远虚，景深。元素层次，要突出的元素在前细节越清晰，页面设计分分为近景、中景、愿景。

色彩层次，亮在前，暗在后（技巧：黑白分析方法）

切图：为web 提供图片素材

首页官网设计：首页功能：

1. 展示企业形象

2. 传播主要业务

3. 集合功能入口

（登陆与不登陆的界面区别）

PS：这篇复制下来，让我彻底放弃简书的富文本。