

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:这篇复制下来,让我彻底放弃简书的富文本。
网友评论