实验室的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. SQL Server设置主键自增长列

    1.新建一数据表,里面有字段id,将id设为为主键 create table tb(id int,constraint pkid primary key (id)) create table tb(i ...

  2. ASP.NET 5 之 错误诊断和它的中间件们

    ASP.NET5包含若干个新的功能来辅助诊断错误,可以在Startup类中简单的为应用程序错误配置不同的处理程序或者显示关于应用程序的附加信息. 配置错误处理页面 在ASP.NET5中,在Startu ...

  3. （二）. 细说Kalman滤波：The Kalman Filter

    本文为原创文章,转载请注明出处,http://www.cnblogs.com/ycwang16/p/5999034.html 前面介绍了Bayes滤波方法,我们接下来详细说说Kalman滤波器.虽然K ...

  4. 在 C# 控制台中记录异常日志并输出

    最近做了一个小程序,要求在控制台中记录程序运行的异常并输出到指定的文件夹中,以下是我的具体的程序代码: public static void ErrorLog(Exception ex) { stri ...

  5. Weblogic发布小问题——The root element weblogic-web-app is missing in the descriptor file

    前几天发布项目遇到这样一个小错误,在此记录一下,以便加深一点印象,下次好解决类似的问题! (对应的应用服务器是WebLogic Server 版本: 10.3.6.0,应用是以文件夹的形式发在服务器的 ...

  6. 三味书屋 bbb

    为学日益 ,为道日损 .损之又损,以至于无为

  7. 【Linux】inode_针对MySQL读写操作在系统层的进一步学习【转】

    转自http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘 ...

  8. ASP.NET Razor 视图引擎编程参考

    ASP.NET Razor 视图引擎编程参考   转载请注明出处:http://surfsky.cnblogs.com Rasor 视图引擎    http://msdn.microsoft.com/ ...

  9. Android WebRTC 音视频开发总结（三）-- 信令服务和媒体服务

    前面介绍了WebRTCDemo的基本结构,本节主要介绍WebRTC音视频服务端的处理,,转载请说明出处(博客园RTC.Blacker). 通过前面的例子我们知道运行WebRTCDemo即可看到P2P的 ...

  10. 仿AS语法来写HTML5—第1章，显示一张图片

    最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 第一篇 ...