实验室的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. NEERC 2013, Eastern subregional contest

    I. The old Padawan Time limit: 0.5 secondMemory limit: 64 MB Yoda: Use the Force. Yes. Now, the ston ...

  2. CString.Format的详细用法(转)

    CString.Format的详细用法(转) 在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CS ...

  3. C++ 之旅：前言

    日前,拿起了C++教材开始学习. 在大学二年级的时候,其实C++已经是我们的必修课程.然而,那时的我刚从C语言的噩梦中逃出来,对C++也不甚喜爱.刚接触编程的我当时实在无法理解譬如下面这段 int x ...

  4. 凸包（Convex Hull）构造算法——Graham扫描法

    凸包(Convex Hull) 在图形学中,凸包是一个非常重要的概念.简明的说,在平面中给出N个点,找出一个由其中某些点作为顶点组成的凸多边形,恰好能围住所有的N个点. 这十分像是在一块木板上钉了N个 ...

  5. canvas-a10isPointPath2.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Maven中央存储库

    当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没有找到,然后把它会从默 ...

  7. Android开发如何去除标题栏title

    虽然是一个小问题,今天遇到了,也就写下来吧.防止自己忘掉. 取消标题栏的方式有两种,一种是在代码添加,另一种是在AndroidManifest.xml里面添加. 1.在代码中实现:在此方法setCon ...

  8. XSS测试语句大全

    '><script>alert(document.cookie)</script> ='><script>alert(document.cookie)& ...

  9. 十四、Struts2的国际化

    十四.Struts2的国际化 1.配置全局国际化消息资源包 配置全局消息资源包 <!--配置全局消息资源包 -->     <constant name="struts.c ...

  10. 基于s5pv210嵌入式linux系统sqlite3数据库移植

    基于s5pv210嵌入式linux系统sqlite3数据库移植 1.下载源码 http://www.sqlite.org/download.html 最新源码为3080100 2.解压 tar xvf ...