Web Design：给实验室UI们的一堂课（上）
实验室的UI越来越水，设计什么的做的一塌糊涂，所以拖了很久，就想给他们讲一下设计或者说入门吧，上周末才倒出来时间。
这里放上PPT和讲稿吧，懒得去整理板式了。
主要讲了一下Web Design怎么做，大概有什么，然后怎么去做吧，没有什么技术性的东西，属于入门吧。
【讲稿】：
好，我们开始今天的设计讲座，我更倾向于叫做设计沙龙，因为讲座的话是我在讲大家在听，而设计这个东西，每个人都有自己的想法，都有自己独一无二的idea，我希望能够和大家分享我做web这两年来积攒下的经验或者是点滴吧。
好久没有给实验室做沙龙了，其实我还是挺喜欢跟实验室的学弟学妹或者说是学长学姐一起开沙龙或者是讨论东西的，这次准备不太周到，讲的不好的地方，大家多多包涵吧。
【讲稿】中午席铭学长发了个惨无人道的人人，然后我就光荣躺枪被黑了。跟UI组的同学们可能还不太熟，这里简单列了一下我的情况吧。姓李名森，12级，在大一的时候在实验室的Windows Phone组做应用开发，在学C#之后接触到做网站，然后我觉得这一个方向更吸引我，所以现在在转行做Web FrontEnd Engineer,就是大家平时说的前端，前端不是个好活，被后端鄙视，被UI欺负，各位有打算转前端的可以联系我，专业坑学弟学妹。虽然说我是一个前端coder，但是我现在也非常喜欢去做WEB的设计，包括界面和交互设计、也包括网站功能设计。我主要玩的是css、js这两个传统的前端工具，然后有时候也会写点php来实现一些好玩的功能。自己没事也做一些喜欢的网站，比如我和几个朋友一起做起来的darling网，我们有好的功能设计、好的前端，现在就缺个UI了。
【讲稿】今天主要给UI们做一次web设计入门吧，之前给Pm组、Web组都讲过类似的东西，但是针对的方向不同，可能在给pm做沙龙的时候，更倾向于去让他们学会设计web产品、包括设计原则等等，而给web组讲的话主要是技术性的，比如如何实现滚动刷新、如何通过css来改善你的网站。而今天呢，主要想讲的是，关于界面设计和交互设计，因为这些才是一个好的web designer,一个好的 uI应该去做的。在座各位应该都用了几年的电脑，读了一年软件之后对网站这个东西应该是非常熟悉，但是【念PPT】。
【讲稿】第一个版块儿，什么是web design?web 设计是什么？自从我做web之后呢，很多人都说“呦，你是做网页的吧，你是写网页的吧，这个我也会不就是<html>吗”，我只能笑着说“是是是”。然后我认识很多做UI的，不对，不应该叫做UI的，应该叫“用PS的”，他们常说“web设计啊，我会啊，不就是拿PS画个页面吗？”埋汰我可以，埋汰web design绝对不行，【点】扇死丫！
【讲稿】粗略的来讲，抛去主要负责数据处理、模型处理的后端版块儿，一个web的前端设计可以分为这些板块：【念PPT】。
【讲稿】结构布局是指什么呢？我认为哈，结构布局主要指的是网页的界面元素布局和网页的前端逻辑，比如说，大家天天上网，刷网页，但是，一个网站的结构元素、结构布局有哪些？ 这些又怎么设计呢？
【讲稿】按照一个常用网站的模式，我们排除掉那些full-screen、single-page，现在一个常见的网站，会有header首部栏，我们可以把一本书当做一个网站，那首部栏就是这本书的书皮，它往往是丰富多彩带图片、高端大气带特效的，它最直接的反应了网站的主要内容、这是一个什么网站、这是一个关于什么的网站、网站的主题是什么，一般是图片、大色块、flash动画，高度的话一般在100px左右，你不可能整个页面一半都是你这header图吧，你要这么干了，就是标题党了。有的时候首部栏也可以被当做广告栏，还是置顶的，所以这块儿的广告一般都比较贵= =
【讲稿】很多网站设计的时候首部栏被简化了，因为没有什么固定要介绍说明的，比如腾讯新闻，没有必要做一张逼格非常高的图放在那儿，然后通过图片告诉大家“我们是做新闻的，不是卖水果的”，所以有的功能性比较强，页面指示比较明确的网站，喜欢把nav导航栏当做首部来使用。Nav导航栏，像是我们之前说的那个例子书里面的目录，简明扼要，想看什么直接翻过去，导航也是，想看娱乐、音乐、体育，直接点进去就行可。这种情况在门户网站、官方网站上出现的比较明显，但是在很多的企业网站、或者是宣传网站上，使用图片类的比较多，因为一图胜千言嘛。图片总是能抓得住用户的眼球，就像各位做一个海报一样，你海报上要是平铺的都是字，肯定很少人在那儿看完，你要是换个美女图的话，很多少年们都会羞涩的观望的。
Web Design：给实验室UI们的一堂课（上）的更多相关文章
- Web Design：给实验室UI们的一堂课（下）
[讲稿]From top to down,自顶向下哈,首部栏.导航栏之后一般是页面的主模块,也就是Body部分,这一块儿才是你网站的核心内容,文章.新闻.动态.数据.图表.相册等都是在这儿体现出来.在 ...
- eclipse里打开SWT项目找不到source/design的图形UI设计界面
因为前天重新装了个新版的eclipse, 结果今天打开一个SWT的项目,突然找不到source/design的图形UI设计的两个切换按钮 我把SWT组件重新装了还是找不到.结果后来发现是因为重装ecl ...
- 自适应网页设计（Responsive Web Design）
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- iPhone 6 Screen Size and Web Design Tips
Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is b ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- Understanding Responsive Web Design: Cross-browser Compatibility
http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...
- 自适应网页设计（Responsive Web Design）（转）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- advanced dom scripting dynamic web design techniques Part One DOM SCRIPTING IN DETAIL CHAPTER 1 DO IT RIGHT WITH BEST PRACTICES
You’re excited; your client is excited. All is well. You’ve just launched the client’s latest websit ...
- （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
随机推荐
- 如何在IIS7上配置 FTP7并使用IIS管理凭据方式进行验证？
如何在IIS7上配置 FTP7并使用IIS管理凭据方式进行验证? 在 Windows Server 2008 R2 发布后,gOxiA 就开始着手于相关的测试和评估.IIS 是重点测试和评估之一!而今 ...
- vc 判断哪个按键 被按下 消息 按键 状态
测试Numlock 是否是亮的 环境控制台程序: #include "stdafx.h" #include <stdio.h> #include <conio.h ...
- TesCase-GUI（图形用户界面）测试
GUI测试是功能测试的一种表现形式.不仅要考虑GUI本身的测试,也要考虑GUI所表现的系统功能的测试. GUI应具有的要素 1.符合标准和规范 2.直观性 (1)用户界面是否洁净.不唐突.不拥挤? ...
- Android开发-API指南-<action>
<action> 英文原文:http://developer.android.com/guide/topics/manifest/action-element.html 采集(更新)日期: ...
- JDK源码分析之集合02ArrayList
一.前言 有了前一篇对集合类的概述,我们知道ArrayList是属于Collection类系中的一个具体实现类,其特点是长度可以动态改变,集合内部使用数组保存元素.下面我们对源码进行分析. 二.Arr ...
- Datable 排序
if(dt.Columns.IndexOf("name") != -1) //存在这个字段 { dt.DefaultView.Sort = "name asc" ...
- Decks
Now that we have Card objects, the next step is to define a class to represent decks. Since a deck i ...
- The str method
__str__ is a special method name, like __init__, that is supposed to return a string representation ...
- django 单独测试模块
今天单独测试django的一个views文件,出现错误import的模块没有定义,这个模块是在django项目中自己编写的,解决办法: 1../manage.py shell 通过命令行进去加载,再执 ...
- ubuntu解压zip文件乱码问题
我的zip文件里的内容是有中文名,也有密码,在网上找到几种解决办法只有一种可以,所以在这里记录一下: 首先是安装7zip来解压,7zip的解决办法在这里,但是无法解决我的问题,仍然有乱码问题 最后是在 ...