YSlove.net » UI

GUI进化史

YSjia — Fri, 14 Jan 2011 01:26:03 +0000

GUI进化史

View more presentations from lijing00333.

中间乔布斯的那句话引用的太到位了：

设计不仅仅要关注产品的外观和感觉，更重要的是考虑产品怎样工作 — 乔布斯

Copyright © 2010 by YSlove.net
欢迎留言 | 作者: YSjia | 原文链接：http://yslove.net/2011/01/gui-5829851/
数字指纹 3abf2858e3aa210a1750056317836753 (38.107.179.206)

前端开发手册之需求分析

YSjia — Thu, 18 Nov 2010 04:57:36 +0000

前端开发由于其夸度比较大，涉及到由需求，设计到制作三个不同但是关联非常大的领域。所以一定的规范是肯定需要的。在这里我总结一下我这几年来的开发经验，希望与大家分享并共同提高。

这里所提到的只是涉及到与其他领域（设计与制作）密切相关的问题，绝对不是一篇教程教你怎么去做需求分析，请大家注意。

不知道想要什么

有时经常接到的命令就是：先做吧，做完看看能放啥放点啥。（不能描绘自己的思想）

这样的命令到设计师简直就是一头雾水，正所谓巧妇难为无米之炊，这样模棱两可的说法一点信息含量都没有是无从下手的。更不要说是做设计。

按XXX的样子做出来就行（崇洋媚外形）

这应用也是最常用的说法，对自己的需求不理解，不知道我们现在到底需要什么。设计师按XXX的样子做出来后，发现填入自己的数据根本不着调！为什么呢？就好像不知道自己的脚多大号，然后指着旁边帅哥的脚对着售货员说：就要他那对鞋。结果拿来自己不但大小不合适，连款式也不合适。这样的作品出来设计师做出来不爽，提需求的人不爽，拿出去别人更不爽。

我觉得用红色会很强眼（幻想形）

经常接到任务是没有文档或者是文档不全的，然后做出来后发现不是当初想要的，抓住设计师一顿狂改。

“这个再加一张图片，要大一点的，突出气势；然后加一张图片，突出场面宏大；再加些人… …”这样流水账一样的描述相信当场已经崩溃的N多次。

这是需求人员与设计师沟通的一个瓶颈，这个瓶颈主要体现在需求人员对文字把握能力太弱，不善于总结，更不能对整体进行概括。造成给设计师没有一个完整的思路与创意模式。更无法对这样的流水帐进行创作。

设计师需要什么

设计师往往需要的是更清晰的思路，他需要知道这是干什么的、用在哪里的（促销或说明页）、需要有哪些注意的（图片的版权与其相应表达的意思，这个意思不怕你多，但是一定要精炼主次分明）还有一点很重要，对文案的理解（文字排版需要）与字数的范围（宽与高）

让其他人理解你的思想是非常重要的，由其对于团队合作来说！

自己的事要自己解决

不要忘记分析二字，刚才上面提出的情景都是只提出需求，而根本找不到分析在哪里。暂且不说什么数据分析、用户行为分析、用户统计调查与行业分析调查等。

一个最基础的就是建模，参加过数学建模的同学应该了解，对于一个问题首先需要找到切入点，然后不断的去探索实验，最后用一个简单的（或复杂的）模型来说明甚至是证明你们的结论。

那需求人员用什么“建模”呢？

首先应该读一下《餐巾纸的背后》将使你的执行更有效率

然后去熟练的应用一下工具吧：

Balsamiq Mockups – 非常不错的草图工具，这就是你的纸和笔！

Axure – 如果你追求精度，这就是你的利器！

纸、笔 – 这是最简单也是最有效的工具，你肯定有！

最后参考一下我的流程：前端组需要什么原型设计流程也许能找到适合你的方法。

以上的方法有一个要注意的，就是不要把画出来的草图当作设计稿来做，这仅仅是草图即使你使用Axure做出来的高精度也是一个草图而以，这仅仅是让你和你的伙伴思路更清晰的工具，不是设计指导！

最后还有一点需要注意，千万不要盲目的去追随交互设计的概念，交互设计是没有错的，但是要符合你的情况下才使用，盲目的跟随往往令你陷入困境甚至是失败。基础才是重要的：交互设计？文字编辑？

也许这些文章您也感兴趣:

Copyright © 2010 by YSlove.net
欢迎留言 | 作者: YSjia | 原文链接：http://yslove.net/2010/11/front-end-development-and-analysis/
数字指纹 3abf2858e3aa210a1750056317836753 (38.107.179.206)

MyGMC ICON Design Beta

YSjia — Wed, 28 Apr 2010 08:27:01 +0000

由Jun设计的一套图标（第一个版本）

Copyright © 2010 by YSlove.net
欢迎留言 | 作者: YSjia | 原文链接：http://yslove.net/2010/04/mygmcicondesignbeta/
数字指纹 3abf2858e3aa210a1750056317836753 (38.107.179.206)

MyGMC Design

YSjia — Wed, 28 Apr 2010 08:14:11 +0000

这是一款桌面应用软件（AIR版本）

Login From

主要登陆入口，广告位是必不可少的。~_~（By Jun）

Calendar

做为主要桌面应用，其功能需要简单易用，并且与主程序的功能链接要灵活。（图片中的图标为第二版图标）

Main From

主操作界面，没什么多说的，应用为王。

Detail From

Other Version

一个项目必不可少的一定是不断的迭代，来看看这些迭代的产物吧。

基础原型（By Jessica）

概念演示

细化与完善（中间N个版本略… …）

也许这些文章您也感兴趣:

记录 – 三年间为公司做了哪些事

Copyright © 2010 by YSlove.net
欢迎留言 | 作者: YSjia | 原文链接：http://yslove.net/2010/04/mygmcdesign/
数字指纹 3abf2858e3aa210a1750056317836753 (38.107.179.206)

前端开发常见问题（非js）与解决方案

YSjia — Mon, 07 Sep 2009 06:11:00 +0000

在开发越来越深入，越来越复杂，人员也越来越多时，各种各样的团队问题便随之而来。

以下列出一些我在开发中经常遇到的问题，并应用相应的方法来解决，大家有很好的建议不防提出来大家讨论。:)

问题

设计：

UI不够统一
设计不规范，导致制作时出样式出现偏差

CSS：

CSS过于混乱，多人联合编写时命名空间冲突问题
各自为政，不能使相同的部分共用起来，造成沉余与维护困难
乱用Selector优先级，导致无法更新样式。

HTML:

结构嵌套问题
语意不明确

解决方案

设计：

多利用草稿，制定初期架构草图（图1）
制定统一版式与UI样式（图2）
精确计算宽度值与其他数据（可以蓝图阶段进行），并严格遵循

CSS：

CSS采用统一的命名规则如：header_wrapper, main_containter或header-wrapper, main-containter

注：后一种写法header-wrapper在.net的服务端控件中会报错，由于.net中无法识别id中含有‘-’

通常我的作法为：

id:headerWrapper

class:header-wrapper

当然其实我还是建议采用‘-’的写法，如果不是为.net做开发的话。

引用类库或自己编写相关类库，并制作相关文档，按文档编写。这样可以最大限度的避免命名冲突。

另外一点就是在全局引用‘命名空间’的做法，因为CSS本身并没有这一概念所以需要做一些hack手段

代码:

...

利用CSS的权重进行的hack，也是一种比较通用的hack手法，这样就可以利用CSS的优先级来做不同的样式。所以CSS的优先级是个非常重要的工具！

HTML：

对于页面的基础，莫过于HTML。整个架构的骨架！

为避免大规模开发时造成不必要的混乱，一定要按W3C的一些标准来实施

可参考：符合XHTML Strict 1.0 W3C组织标准的标签与结构

进而就需要考虑应用一些规则

如：Grid System

这里先打个招面，以后的文章里再详细说明一下Grid System。

现在网站大家都是即时开发，很少有整理与规划HTML的习惯，鉴于这点，应该多向CSS Zen Garden学习，整理由最适合用自己的骨架。

也许这些文章您也感兴趣:

质感风暴

jun — Sat, 23 May 2009 07:29:00 +0000

Photoshop质感练习 ^_^

花了不少时间，不过还是很开心的，大家分享一下。哈哈。

播放器UI设计

YSjia — Wed, 15 Apr 2009 09:07:19 +0000

Photoshop 8.0

战鼓，人们心中的怒吼！

音乐可以给人们带来许多思想上的波澜，可以给予人们无限的启发。

同样一款漂亮的播放器让人们不仅在听觉上得到享受的同时在视觉上更有辅助效果，让音乐更加美妙。