Web UI设计基础(理论篇)

一、web UI是什么?

UI(User Interface)指的是用户界面,主要包括用户与界面之间的交互关系(或方法的集合),所以关于UI可以分为三个方向:用户研究、交互设计、界面设计。
WUI(website User Interface),即网页用户界面。WUI设计与常见网站建设的区别就是,WUI更注重人鱼网站的交互和体验,是以人为本进行设计

二、你需要掌握的分辨率

概念:确定计算机屏幕上显示多少信息的设置,以水平和垂直像素来衡量。
特征:显示分辨率就是屏幕上显示的像素个数,屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。


  1. 常见的长宽比:
  • 5:4 = 1.25
  • 4:3 = 1.33
  • 16:10 = 1.60(宽屏)
  • 16:9 = 1.77(宽屏)

2.常见分辨率

  • 1266x768:两侧会有白边
  • 1024x788:基本上和浏览器匹配
  • 小于1024:小于浏览器宽度,会出现滚动条
  • 自适应布局:根据浏览器大小自动适应大小

三、网页都由哪些构成的?

模块:模块是网页布局中最小的单位,展现不同类别的信息,具有特定的功能。比如:header/banner/main/footer/news/sidebar/logo/list/content/service/title/tips.....

四、web的基本分类

  • 门户网站:雅虎、新浪
  • 分类信息:58、感激
  • 交易类:京东、天猫、淘宝
  • 娱乐性:A站、B站
  • 个人博客:个人网站
  • 论坛(社区):发布信息、信息回帖、交流
  • 行业类网站:汽车之家、经管
  • 企业门户
  • 机构类网站:政府
  • 功能性网站:快递100、百度、有道(提供一种或几种功能)

五、网页是如何实现的

web标准化布局的是由三个组成部分:结构、样式、行为。

  • 结构:就是网站的框架组成,由html等构成;
  • 样式:就是设计的特点,包括字体、大小、颜色、格式、布局...
  • 行为:实现一些动态效果...
  1. HTML中的色彩
  • HTML中使用16进制的RGB颜色值对颜色进行控制
  • 16进制的数码有:0123456789abcdef;
  • 书写规范:#RRGGBB

2.web标准化布局原理

  • 吧网页看成多个网格
  • 先有行再有列(从上到下)
  • 先做容器后做内容(从外到内)

3.web中的尺寸单位

  • px(像素):显示器上的最小单位
  • pt(磅):长度单位,物理尺寸,1pt=1/72英寸
  • PPI(DPI):每英寸的像素数,是一个率,用来表示精度
  • em:百分比(%)

六、设计维度

设计维度包括:版式、色彩、图片、字体、段落、细节;

七、设计规范

设计规范就是设计工作中所要遵循的一套规则,在项目初期就需要建立,以此为基准,进行之后的设计开发工作。并且设计规范要和充分考虑用户群体,面向用户进行指定。
规范可以节约各方面的成本、节约时间、提高工作效率。

  1. 色彩规范:主色、色值、字体色值...
  2. 文字规范:大小、颜色、字体、字体属性、
  3. 图标规范:子页、主页...
  4. 控件规范:按钮...

八、界面设计流程

整个网站从需求到上线的流程:
需求->策划->原型图->设计图->制作->上线

  1. 界面设计是在设计流程
  • 版式:分析需求内容和原型图,绘制草图;
  • 制作:优化版式结构,填充内容,对于具体细节进行样式设计。
  • 输出:优化改进、切图,输送给切图前端工程师
  1. 常用图片可输出的格式
  • GIF:动态、可透明底、体积小、适用于表情;
  • JPEG、JPG:色彩丰富、对设备和系统平台适应性强、通用性强;
  • PNG-8:(8位):课代替GIF和TIFF、体积小、透明底、开发常用;
  • PNG-24:(24位)
  1. 常用视频/音频输出格式
  • .FLV:体积小、加载速度快、增长最快、最为广泛的视频传播格式
  • .mp3:大幅度缩小音频体积、音质有损耗

九、设计技巧

1.视觉层次:近大远小,近实远虚、亮前暗后
2.专题页:强烈的视觉效果、有趣味的体验、推广信息

十、如何去做

作为一个设计师,要经常去搜集行业信息、发展趋势,如某一阶段的风格、样式,对于不同分类的网站,应该要留心观察、勤于思考,观察每个网站的布局、风格,找到设计亮点,观摩分析,培养自己的思维方式,总结技术特点,形成自己的风格,更好的学会去创造而不是模仿。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容