实验室的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们的一堂课（上）的更多相关文章

  1. Web Design：给实验室UI们的一堂课（下）

    [讲稿]From top to down,自顶向下哈,首部栏.导航栏之后一般是页面的主模块,也就是Body部分,这一块儿才是你网站的核心内容,文章.新闻.动态.数据.图表.相册等都是在这儿体现出来.在 ...

  2. eclipse里打开SWT项目找不到source/design的图形UI设计界面

    因为前天重新装了个新版的eclipse, 结果今天打开一个SWT的项目,突然找不到source/design的图形UI设计的两个切换按钮 我把SWT组件重新装了还是找不到.结果后来发现是因为重装ecl ...

  3. 自适应网页设计（Responsive Web Design）

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  4. 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 ...

  5. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  6. Understanding Responsive Web Design: Cross-browser Compatibility

    http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...

  7. 自适应网页设计（Responsive Web Design）（转）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  8. 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 ...

  9. （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

随机推荐

  1. 剑指Offer：面试题3——二维数组中的查找（java实现）

    问题描述:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路:取数组中的元素与 ...

  2. 菜鸟学四轴控制器之3:数字积分法DDA实现直线插补

    上一篇的逐点比较法显然是无法画一条有倾角的直线的.因为X轴和Y轴永远都不同步,也就是像打台球一样,你打一个,我打一个,如果我进了球,我再接着打一个. 也就是说,如果直线为45度,也是没有办法画出来的, ...

  3. SDUT 3344 数据结构实验之二叉树五：层序遍历

    数据结构实验之二叉树五:层序遍历 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 已知一个按 ...

  4. 学习总结 Java 基本数据类型 和标识符以及常用的关键字

    思维导图: public static void main(String[] args) { // java程序的入口点 c#是Main System.out.println("测试输出&q ...

  5. java中List Set Map使用

    @Test         public void run()        {                              ArrayList<String> list= ...

  6. python 基础知识(一)

    python 基础知识(一) 一.python发展介绍 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本 ...

  7. Android控件大全(一)——DialogFragment创建对话框

    DialogFragment在android 3.0时被引入.是一种特殊的Fragment,用于在Activity的内容之上展示一个模态的对话框.典型的用于:展示警告框,输入框,确认框等等. 在Dia ...

  8. SQL数据库基本语句

    SQL特点--> 1)综合统一.SQL是集数据定义.数据操作和数据控制于一体,语言峰峰统一,可独立完成数据库生命周期的所有活动. 2)高度非过程化.SQL语言是高度非过程化语言,当进行数据操作时 ...

  9. 正斜杠和反斜杠-windows、web、c语言大讨论

    首先,在c语言中,正斜杠/ slash 表示除法反斜杠\ backslash ,\用于转义字符,\n.\0. 其次,UNIX 操作系统设计了这种路径分隔法,它使用正斜杠:/.由于网络是首先应用在 UN ...

  10. SVN 外部引用(svn:externals)处理相似系统的公用代码

    一.创建外部引用 我们常常遇到这样一个场景,我们有两个系统,两个系统用的是同一套框架.如果我们用两套程序 去做,当我们修改这个公共的框架的时候,另外一个还是旧版本的,很容易造成混乱. SVN的外部用就 ...