GUI进化史 View more presentations from lijing00333. 中间乔布斯的那句话引用的太到位了： 设计不仅仅要关注产品的外观和感觉，更重要的是考虑产品怎样工作 — 乔布斯
你现在的位置 -> 云 -> UI
GUI进化史
星期五, 一月 14th, 2011前端开发手册之需求分析
星期四, 十一月 18th, 2010前端开发由于其夸度比较大，涉及到由需求，设计到制作三个不同但是关联非常大的领域。所以一定的规范是肯定需要的。在这里我总结一下我这几年来的开发经验，希望与大家分享并共同提高。 这里所提到的只是涉及到与其他领域（设计与制作）密切相关的问题，绝对不是一篇教程教你怎么去做需求分析，请大家注意。 不知道想要什么 有时经常接到的命令就是：先做吧，做完看看能放啥放点啥。（不能描绘自己的思想） 这样的命令到设计师简直就是一头雾水，正所谓巧妇难为无米之炊，这样模棱两可的说法一点信息含量都没有是无从下手的。更不要说是做设计。 按XXX的样子做出来就行（崇洋媚外形） 这应用也是最常用的说法，对自己的需求不理解，不知道我们现在到底需要什么。设计师按XXX的样子做出来后，发现填入自己的数据根本不着调！为什么呢？就好像不知道自己的脚多大号，然后指着旁边帅哥的脚对着售货员说：就要他那对鞋。结果拿来自己不但大小不合适，连款式也不合适。这样的作品出来设计师做出来不爽，提需求的人不爽，拿出去别人更不爽。 我觉得用红色会很强眼（幻想形） 经常接到任务是没有文档或者是文档不全的，然后做出来后发现不是当初想要的，抓住设计师一顿狂改。 “这个再加一张图片，要大一点的，突出气势；然后加一张图片，突出场面宏大；再加些人… …”这样流水账一样的描述相信当场已经崩溃的N多次。 这是需求人员与设计师沟通的一个瓶颈，这个瓶颈主要体现在需求人员对文字把握能力太弱，不善于总结，更不能对整体进行概括。造成给设计师没有一个完整的思路与创意模式。更无法对这样的流水帐进行创作。 设计师需要什么 设计师往往需要的是更清晰的思路，他需要知道这是干什么的、用在哪里的（促销或说明页）、需要有哪些注意的（图片的版权与其相应表达的意思，这个意思不怕你多，但是一定要精炼主次分明）还有一点很重要，对文案的理解（文字排版需要）与字数的范围（宽与高） 让其他人理解你的思想是非常重要的，由其对于团队合作来说！ 自己的事要自己解决 不要忘记分析二字，刚才上面提出的情景都是只提出需求，而根本找不到分析在哪里。暂且不说什么数据分析、用户行为分析、用户统计调查与行业分析调查等。 一个最基础的就是建模，参加过数学建模的同学应该了解，对于一个问题首先需要找到切入点，然后不断的去探索实验，最后用一个简单的（或复杂的）模型来说明甚至是证明你们的结论。 那需求人员用什么“建模”呢？ 首先应该读一下《餐巾纸的背后》将使你的执行更有效率 然后去熟练的应用一下工具吧： Balsamiq Mockups – 非常不错的草图工具，这就是你的纸和笔！ Axure – 如果你追求精度，这就是你的利器！ 纸、笔 – 这是最简单也是最有效的工具，你肯定有！ 最后参考一下我的流程：前端组需要什么 原型设计流程也许能找到适合你的方法。 以上的方法有一个要注意的，就是不要把画出来的草图当作设计稿来做，这仅仅是草图即使你使用Axure做出来的高精度也是一个草图而以，这仅仅是让你和你的伙伴思路更清晰的工具，不是设计指导！ 最后还有一点需要注意，千万不要盲目的去追随交互设计的概念，交互设计是没有错的，但是要符合你的情况下才使用，盲目的跟随往往令你陷入困境甚至是失败。基础才是重要的：交互设计？文字编辑？
MyGMC ICON Design Beta
星期三, 四月 28th, 2010MyGMC ICON Design
Beta
MyGMC Design
星期三, 四月 28th, 2010MyGMC UI Design
Layout
前端开发常见问题（非js）与解决方案
星期一, 九月 7th, 2009在开发越来越深入，越来越复杂，人员也越来越多时，各种各样的团队问题便随之而来。 以下列出一些我在开发中经常遇到的问题，并应用相应的方法来解决，大家有很好的建议不防提出来大家讨论。:) 问题 设计： 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手段 代码: <html> <body class="text-page"> … </body> </html> 利用CSS的权重进行的hack，也是一种比较通用的hack手法，这样就可以利用CSS的优先级来做不同的样式。所以CSS的优先级是个非常重要的工具！ HTML： 对于页面的基础，莫过于HTML。整个架构的骨架！ 为避免大规模开发时造成不必要的混乱，一定要按W3C的一些标准来实施 可参考：符合XHTML Strict 1.0 W3C组织标准的标签与结构 进而就需要考虑应用一些规则 如：Grid System 这里先打个招面，以后的文章里再详细说明一下Grid System。 现在网站大家都是即时开发，很少有整理与规划HTML的习惯，鉴于这点，应该多向CSS Zen Garden学习，整理由最适合用自己的骨架。
质感风暴
星期六, 五月 23rd, 2009Photoshop质感练习
播放器UI设计
星期三, 四月 15th, 2009Photoshop 8.0
战鼓，人们心中的怒吼！
音乐可以给人们带来许多思想上的波澜，可以给予人们无限的启发。
分类
相关文章
最新回复
- Louis Han: 看起来确实很硬
- YSjia: 看了你的博客，是不可以与其他图片延迟...
- Hello Beautiful: 感觉到效果了。。
- Louis Han: 让我想起来一个讽刺的：领导去视察机房...
- YSjia: 我已经看到你了，哈哈！
- junjun: 我要求要被发现
- Y.Jiajia: Hi Marco, Thanks ...
- marco: you can provide th...
- marco: dear YSjia, many u...
- Y.Jiajia: 不行，这种情况应该使用noscrip...
随机作品
Simple？Simple！
以清晰的架构与合理的图文搭配，突出平台与企业品牌的概念。
博客设计
清新爽快风格
云
.net air Android axure Balsamiq Mockups bing bluehost Chrome css CSS权重 Firefox flash flickr free pictures funny globalmarket Gmail GOMS Google grid GUI gzip htc html4 ICON IE !important ie6 ie7 ipa iPod iTunes javascript jQuery jQuery UI jun lazyload MAC microsoft NDS node.js photoshop php pictures plugins QQ QQMail safar Specificity ssi TWO UE UED UI Warcraft III web 3.0 web design web development weibo widget windows wordpress writer xhtml Yahoo z-index 交互设计 任天堂 前端开发 字体 小故事 工作 影视 思考 恶意软件 情感 手绘 搜索2.0 新浪微博 星际 暴雪 杂谈 正则 流程图 涂鸦 生气 生活 简历 网上购物 艺术 设计 转载 闲聊 面试技巧 鼠绘
群