Dreamer

工作整理

工作上的东东整理,更新很慢

与960 Grid System相关的那些问题

November 28, 2010 by dreamer

10月份有机会从零开始设计一整个企业网站。借此机会用上了心仪已久的960 Grid System。我们四年前的旧网站也即将改版,原来设计的宽度是1000px,我们打算今后都统一到960px,同时用上960 Grid System。下面整理了使用960 Grid System时考虑的一些问题,菜鸟们共勉。 为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息。 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案。一方面,需要做一个能适应各个宽度的设计,从背景图片,到每个栏目标题的文字长度,都需要考虑到适应多变的宽度;另一方面,也是最致命的一点,相比英文单词,中文方块字是没有起伏的,用户对文字位置记忆的依赖性更大。自适应宽度也就意味着一行显示的文字数是不定的,阅读中文文字块时很可能很难一下找到刚才读到的那个地方现在到哪去了。因此,固定页面宽度比自适应更常用。过去,信息闭塞独立思考的我们会考虑用主流屏幕宽度-20px(IE中左右边框+滚动条的宽度)。在1024*768的分辨率下,页面宽度应该为1004px。但过不了多久,很多人便意识到,有一个更好的宽度——960px。 960 = 2^6*3*5。与1004这个无厘头的数字相比,960能够被12、15、16、24整除,得数分别为80、64、60、40,这些数字听着就和谐而且靠谱。因此960非常适合于使用栅格设计系统进行网页设计。 为什么要用栅格设计系统? 栅格设计系统,即Gird System(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。 栅格设计系统在印刷出版物的排版设计中十分普遍,网页设计常会从印刷排版中汲取灵感。在网页设计中采用栅格设计系统不单能够继承工整简洁的风格,还能大大的减少设计的工作量;从前端工程的角度来说,这种排版方式优点不言而喻:天然的规范性和可重用性。从整个团队来看,使用栅格设计系统能简化工作流程,便于交流,也便于分工和统一风格。 这是使用3*3的网格的960px页面设计草图,来自“The Principles of Beautiful Web Design”。 960px是唯一的么? 960是否是唯一最优的页面宽度呢?当然不是。目前使用栅格系统的页面的宽度并不严格就是960px,也可能是950px,例如yahoo的YUI框架就是950px。关于网页栅格系统设计的介绍可以看看TaobaoUED的这篇文章。1024*768也不会永远是主流分辨率,随着分辨率的发展,下一个较优宽度很可能是1440(2^5*3^2*5),或者是一个没有分辨率的时代,页面能够按比例自动缩放(就像现在在移动版safari看到的那样)。另外,好的设计和创意常常需要打破规则,栅格设计系统也并非网页排版唯一可用的风格,在主流之外会一直存在一些很优秀的非960px页面(尤其是全flash网站);有时候人们会议论他们seo上的缺陷,或者兼容性、用户体验不够好,但从艺术的角度上他们依然很优秀。 为什么用960 Grid System? 960 Grid System是由Nathan Smith开发的CSS框架,有12列、16列、24列三个版本。CSS对于很多程序员来说可能完全不屑于优化,但它确实和其他的程序代码一样需要架构和优化。即使运营的是一个很小的网站,适当地组织、重用CSS代码能够节省相当多的时间和成本。CSS框架正是那个能让你在每个网站都屡试不爽的东西,把那些无聊重复的工作都交给它们吧,把自己的精力集中在怎么创造更令人动心的设计上! 而且,960 Grid System不仅仅提供了CSS框架,它还提供了可打印的缩略图表,Firewofks、Phototshop、OmniGraffle 和Vision的模板源文件⋯⋯你可以让项目组的很多人都用上它。 它也能为你减少了很多兼容性问题,它支持被yahoo评为A级别的浏览器: 用960 Grid System做出来的东西好看么? 这个问题很有现实主意色彩。使用960 Grid System创造好网站的能力毋庸置疑,在它的网站上列出了许多成功案例。此外,wordpress用户熟悉的WooThemes也用了960Grid System。 具体到中文的环境中,每个设计师都有自己的判断。例如我自己觉得16列的网格系统比较适合中文企业网站,你可能会有别的看法。但是并不是用了它就一定能创造出令人满意的网页。“Frameworks are merely tools that help people achieve solutions, not the … [Read more…]

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: 960 Grid System, css, CSS framework

烟盒集

September 8, 2010 by dreamer

这些只是全部当中一个不起眼的小方案。 浮云中的另一部分⋯⋯没有数过一共做了几个,但是大部分都有些“不堪回首”。

Posted in: Visual Design, 工作整理 Tagged: 烟盒

心动不如行动——说说Call to Action Button

September 5, 2010 by dreamer

Call to Action Button,即“行动召唤按钮”,指的是界面上那些勾引用户去猛戳它的按钮。它往往代表着这个界面的核心使命——让用户进行某个行动。我们常常能看到Call to Action Button被用来代表注册、下载、购买⋯⋯ 心动不如马上行动,这是电视直销里的广告词。电视直销总是使用各种手段来勾引用户,他们会在屏幕下方用大号字体标注订购电话,用各种视觉语言让你注意到这个电话。我们很难想像会有谁对电视直销产品动了心,却不知道打哪个号码。广告的制作人很明白,一定要突出“行动召唤”!我们的Call to Action Button就像那个订购电话,需要多花点心思。 这是一篇翻译的文章:行动召唤按钮:实例与最佳实践 Call to Action Button在国外的网站中已经很常见,处理的方法也很丰富。中文页面的几大杯具是:中文字体没有起伏,远看就是一大块;信息密度超级大,页面又长又挤;广告多,动画多,喜欢闪⋯⋯这些都非常不利于处理好Call to Action Button。 还是那个鸡冻人心的世界杯活动页面,在首页,它的核心使命是让用户参与竞猜。而在竞猜页面,我们又希望参与的用户顺便也去论坛多聊聊,增加黏度。所以我为两个页面分别设计了Call to Action Button: 这两个按钮的初始设计是照着firefox的下载按钮来的。它的特点是: 1 不规则的形状、高质量图标,吸引用户注意,同时加强品牌印象(主题) 2 明确告诉用户,点了这个按钮会得到什么结果 3 提供了附加说明信息,针对用户可能最想知道的问题,马上提供了解答 不过最后,第一个按钮算是失败了,我很没原则的把这个样式用到了好几个表单里(时间紧张不想再设计新的样式了)⋯⋯果然是无节操党⋯⋯以后会注意的!

Posted in: Interaction&Front-end, User Interface, Visual Design, 工作整理 Tagged: call to action, web

糟糕,我不会买错了吧!——如何避免用户押错队

September 5, 2010 by dreamer

买彩票,最杯具的事情是什么?不,不是中不了大奖,而是明明500万元大奖的号码和昨天打算买的一个不差,你却不小心涂错了号码! 这种错误对于用户是灾难性的。所以为了世界和平,我们应当尽量避免我们的用户遭受这样的打击。 世界杯活动是以竞猜的形式进行的。每一场比赛开赛前48小时,用户需要选择胜负关系和净胜球。一开始,程序给我的原始页面输出是这样的: 11日22:00 南非(A) 墨西哥(B) 净胜球数 胜负关系:A胜, B胜, 平局 净胜球:0个,1-2个, 3-5个, 5个以上 很多用户可能难以在短时间(1-3秒)内做初选择,他们需要记住谁是A谁是B。人脑的短暂记忆容量恐怕只有大约5个单词或者几个字,如果碰上斯洛文尼亚vs阿尔及利亚,用户恐怕还得反复回去对照。而那些过于自信或者抢时间的用户,他们只能凭着感觉走。押错队伍的几率变大了。 让我们做一个简单的调整: 11日22:00 南非(A) 墨西哥(B) 净胜球数 胜负关系:A胜, B胜, 平局 净胜球:0个,1-2个, 3-5个, 5个以上 尽管没有任何排版,似乎不那么容易出错了! 最终这份表单我是这样设计的:用颜色和排版体现队名和字母A B的关系。在竞猜结果那里也用了不同的颜色区分正误(还有图标的大小),这样显得更有感情一些。 正如之前文章提到的,这个专题的时间很紧迫,大概只有2天的时间,其中又有大部分时间用于调整那些静态的企业信息展示的页面。这个真正和用户打交道的页面只留给我2个多小时的时间实现并且与程序对接。确实还有很多地方不够完善。用了一些算不上什么的小技巧。 至于结果,还算欣慰。这次活动或许是我们几年来最成功的一次,有5万多人次参与竞猜,每天都有上千的讨论帖发表,没有人反映他押错了队伍。并且因为明确的颜色区分,表示正确的“绿”和错误的“红”成了论坛中短期的流行词。常常有人抱怨他“全红”,希望能“绿”一下,甚至有人认为是抽多了国内烤烟才导致总是猜错(因为国内烤烟包装大部分是红色的),号召大家抽“小熊猫”(绿色)。还真有人实践了!当然他们不会意识到这和一开始的设计有什么关系,界面设计就是这样,隐形便是成功! ====================== 附上同样是世界杯活动的另一个表单。这是个以下注为形式的活动,需要突出剩余筹码和一些规则、通知。

Posted in: Interaction&Front-end, User Interface, Visual Design, 工作整理 Tagged: web

互动设计是神马?

August 15, 2010 by dreamer

前些天我有些纠结,每次逛一圈互动设计的社区都有一种想死的感觉。一是从平面或者动画的视觉角度而言,和国内交互设计师差距实在是太大了,令我羞愤难当。二是即使是我觉得很有差距的作品,在评论里仍有很多尖刻的批评⋯⋯真是杯具啊。 忽然回过神来,那些成功的“互动设计”作品并没有引起我强烈的想要为之奋斗的欲望。我甚至都不知道什么是“互动设计”,听起来很像“交互设计(Interactive Design)”,而实际上又不是。看起来这是一个流行在国内的设计(广告)圈子的词,以我所见过的作品来理解,我先擅自下个定义: 传统媒介上的广告在互联网上的延伸。多用大量的flash动画表现,内容常常为广告、活动。它并非是界面设计中的某一个环节,更像是广告营销的网络产品的整个设计过程。 互联网比传统媒介的广告有什么优势? 成本低,而且用户随时随地都能自主获取 能够反馈用户的操作(鼠标、键盘)做出酷炫的动画效果 用户能够成为信息发布者。以此为基础开展活动能得到及时的反馈。 我想这其中2、3条应当是“互动设计”与传统广告相比显著的不同点。 而实际上“互动设计”是什么?我只能先求教于伟大的维基百科,维基告诉我: 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。 维基认为互动设计就是交互设计,看来维基是不知道的。我应该找万能的百度知道。全知全能的度受说: (友情提示:这整段话可以直接被忽略,我想你和我一样都看不太懂) 互动设计是一个新的领域:是审美以及文化、技术以及人类科学的融合。他所关心的设计是包含这些技术是否能给予服务,以及和他们互动经验的质量。 人类的生活就是一个互动和生活。从出生开始,我们就和人们以及我们所处的环境,使用我们的感官、我们的想象、我们的情感以及我们的知识直接进行互动。 但是到今天,计算机以及电传沟通允许人们间接的互动。透过我们和其它的以及我们所处的环境进行互动,互动技术已经变成一个媒介;以及他们已经转换我们生活的各个层面。 正如工业设计让机械符合我们的互动,建筑让我们在城镇中来符合社交生活的质量,互动设计以互动的气数来符合我们生活,并且就像是建筑以及工业设计,他们也是关心文化以及技术。 互动设计也显示出新的商业模型,他需要被发表这些服务以及经验。 在这世界上每个人都拥有12的计算机芯片;从而同现在在幼儿园要离开学校开始,没个人都将拥有数千个芯片。在如此复杂、以及和这些技术互动的世界中将会定义他们居住的生活质量。在如此复杂、好的互动设计的世界中未提得数字技术更容易进入到各个年龄层、以及他们的教育之中。 尽管百度百科中通篇都在解释“互动设计”而非“交互设计”,但我还是没有明白它指的是什么。在百科的最后,甚至给出了一个更骇人的定义: 他们称呼关键的人为「使用者接口发展者」,我相信这是和在网站世界中的「互动设计师」是相同的人。 好吧,我们终于可以从「使用者接口发展者」中提取出,互动设计师应该就是用户界面开发人员(User Interface Developer)。互动设计或许可以理解为用户界面设计。 回到之前的现实,我认为现在社区中大量讨论的用户界面设计更多是广告营销产品,甚至90%是flash动画来表现的广告和活动。社区中的讨论主要集中在策划、营销、视觉体验。这更像是在讨论一个传统的广告,不是么?只不过它被放在互联网上了。而我们平时理解的“用户界面设计”,常常是包含“前端实现”、“视觉设计”、“交互设计”、“信息架构”多个环节的工程性的东西。至于那些策划营销应该是在系统范围之外的~当然在用户界面设计中依然要体现策划营销的精神和目的。 单就设计社区当中所说的“交互设计”,我依然希望现在的情况能够有所变化,不要只是广告营销指导、设计师程序员执行的另一种广告,而应该成为一个吸取多领域精华的产品。 在人与互联网之间,好的表现形式并非只有flash。互联网用户拥有电视机前所没有的主动权,它们可以任性地点开这个超链接,也随时会点击窗口上的关闭键。他们或许更喜欢“我要做什么”的模式,而非“你们像让我做什么”。那些酷炫的动画,带着强烈自信,认为用户一定有兴趣继续看下去。实际上在那漫长的flash加载过程中就可能流失相当一部分人。或许有人说,那么我们将flash再优化一些,loading时间更短,不就行了么?再短也比不上纯html呀⋯⋯5秒的延迟对于一部分想要获取信息的人来说已经是忍受的上限。更重要的是,展示动画是一种“想让用户做什么”的模式,即使加入了鼠标键盘响应互动,也改变不了这个本质。 现在有了web2.0,有sns,有了90后,似乎一切都有了一些变化。有人说,用户喜欢展示自我,喜欢个性,我们结合web2.0讨好他们吧!互动设计作品中,很大一部分是在线活动,活动不外乎几种类型:上传照片、上传视频、上传文字、有奖问答、游戏。且不说这样千篇一律的活动是否真能达到目的,这样的活动是否就能够激起人们的参与热情?我仍然坚持flash长动画并不是一个好的吸引人参与的表现方式。况且,上传自己的照片或者视频就能让用户有很强烈的融入感么?还是纯为了活动奖品而特意去做(这就又陷入了那种“你们想让我做什么“的模式)。 要说现在最红火的活动是什么?前些日子恐怕得是”全民调戏凡客“吧⋯⋯我不知到这个活动是否和凡客有关,如果不是,凡客真该向发起活动的人付钱。尽管没有什么奖品,有着各种各样爱好的人们还是乐于参与。有讽刺时政的,有关于娱乐圈的,有体育圈的,有很正经的,有很YY的⋯⋯ps好的简直像凡客的官方版,ps不好的依然有一种强烈的戏谑意味,总是能找到让你印象深刻的~后来在公交车站看到韩寒的那个凡客广告,忽然发现相比广大人民群众,这个文案做得真得好苍白~这个活动没有flash,没有炫目的动画和华丽的介绍文字,你甚至不会留意到参与活动时用户界面的存在⋯⋯⋯⋯我想这才是我理想中的用户界面设计。当然,这样的概念也很契合凡客网站的风格~~再次呼吁凡客给活动发起人付钱吧! 这张照片来自喵啦个咪哒 (这种阵容的巴萨在我手里都能输球)。虽然不算很好的作品,但旁边那个酱油瓶深得我心,gj!

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: 互动设计, 凡客

Designing Interfaces-那些书本教会我们的事

August 15, 2010 by dreamer

Designing Interfaces中文版 它是关于界面设计模式的。在网上看到有人抱怨它太过简单,没有意义,对此也挺无语的⋯⋯至少它对我来说已经很够用了。一个模式的价值并不在于你把它记在脑子里,而是投入实用。在遇到碰到那些恼人的环境时,我们往往已经把各种需求利弊分析得很清楚,此时只需要它浅浅的点明,引入某一种模式便是顺理成章的了。况且我也并不认为Designing Interfaces仅仅是在蜻蜓点水,实际上它只是不愿说得太细。无论如何界面设计都只是一个相对较新的领域,那些准则并没有明确的对与错,具体的方法也五花八门,真正的细节还是需要我们自己去探求~ 一目了然 传说中的界面入门圣经。对于观念上的启发非常大。适合于界面产品开发相关的任何人阅读。它很薄,也很有趣。它的主旨就像它的标题一样(这个主旨确实是从头到位都被贯彻了),界面应当是”Don’t Make Me Think”的。在我看来它依然是一部“观念”上的启蒙书,在实际工作里,我们往往会体会到过程并不能那么完美,但即使不完美的过程依然能得出能够接受的结果。总之,学习他们的精神,走我们自己的路吧。 瞬间之美 如果这本书有腰封,我想一定会被写上《Don’t Make Me Think》作者最新大作或姊妹篇。但实际上它们的内容并不一样。《瞬间之美》更像介于《Don’t Make Me Think》和《Designing Interfaces》的过渡教程。作者漫不经心地带领我们走过一个个界面,述说着他思考和工作的过程,我们会发现一个让人心动的界面是如何从观念变成现实的。

Posted in: User Interface, 工作整理 Tagged: Designing Interfaces, Don't Make Me Think, 瞬间之美

http协议复习笔记摘要

August 8, 2010 by dreamer

基于网络的应用永远离不开网络,尽管工作内容大部分在前端,也不可避免地需要了解网络。上周工作中,我不止一次地想要再复习复习http。周一时,我们讨论用wml还是xhtml mp制作wap网站页面。负责服务器段程序的小盆友有些担心他原l来针对wml做的一些东西要重来了。我突然有点蒙,但还是告诉他用xml还是xhtml mp并不太影响他的工作,只影响我的工作,服务器和客户端之间的沟通主要是遵守http协议,他那边需要改动的不大。接下来的工作涉及到需要判断客户端可接受的mime类型、客户端是否为移动设备的问题,这些需要通过读取http请求报头中的内容。周五碰到最大的问题,恐怕一部分还需要通过http内容来解决:我们的编码为utf-8的页面在ucweb下显示乱码,opera mini和nokia自带浏览器正常,目前不知如何解决。距离计算机网络的考试结束大概有四年的时间,当时这门课程并不太受重视,而现在看来真怀念书里的那些东西。周末特地花了一些时间把http部分重新复习了一遍。 1. HTTP是什么 http即超文本传输协议,是一个应用层的协议。它由两部分实现: 客户端程序 ————– 服务器程序      |——交换http报文——-| http规定了报文的格式和交换方式 1). web文档 web文档由对象组成。对象即文件,可以是html、图像、多媒体⋯⋯对象可以通过url寻址。 2). url 主机名/路径名 3). 浏览器 web应用的用户代理,实现了http协议的客户机端 4). web服务器 用于储存web对象,实现http的服务器端 2. http采用tcp传输 clint 《》 socket —tcp—-socket 《》 server (《》表示投递、获取数据) 3. http是无状态协议 因此需要保存状态时,需要通过cookie、session等才能实现 4. http三次握手 client:发起tcp连接 client:通过连接发送http请求 server:接受报文,取出文件,封装在http响应报文中并发送 server:通知tcp断开 client:收到响应报文,tcp关闭。提取对象,读取,得到另外n个对象的引用(例如其他的图像、css文件) client:对每个引用重复前4步 http并不关心client如何解释web页面,client往往会并行连接n个连接。 5. http报文格式 这部分其实是我现在最需要复习的,结果摘录得太多了⋯⋯干脆就不放上来了。下面是一些对于前端来说可能比较有用得一些参考说明: List of HTTP status codes List of … [Read more…]

Posted in: Mobile, User Interface, 工作整理 Tagged: http

xhtml mp初体验

August 6, 2010 by dreamer

用xhtml mp顺利写了一个“你好手机!”页面后,几个非常棘手的问题就扑面而来,手机网站开发中遇到的繁琐挑战与我们终于开始了正面接触。用了一天的时间好好看了一下XHTML 移动概要 (XHTML MP) / WAP 2.0 教程 。下面是一些些笔记摘要。~( o . o )~ 1. 什么是XHTML mp XHTML mp即XHTML Mobile Profile(可扩展标记语言移动概要)。它是XHTML的完全子集,它是XHTML Basic + XHTML完整版一部分可用于移动设备的属性。 XHTML mp不支持客户端脚本,因此一些基本的验证也要放在服务器端进行。将来可能会有ECMAScript Mobile Profile-ESMP。 相关的一些概念 xhtml – 可视为用xml规范对html进行格式化 xhtml basic – xhtml简化版,无css、框架、script,由w3c规定 wcss/wap css - css2的简化版,有针对移动的扩展(实际开发实践中这些扩展并不太常用),由oma规定,与w3c的css mobile是不同的。 2. MIME类型 MIME即Multipurpose Internet Mail Extensions。 WAP2.0规定的MIME类型:xhtml, html, htm application/vnd.wap.xhtml+xml - OMA指定的MIME,N60系只能查看该类型。 application/xhtml+xml – … [Read more…]

Posted in: Mobile, User Interface, 工作整理 Tagged: wap, xhtml mp, 手机, 手机网站

成为一名手机党

August 5, 2010 by dreamer

如果不是一名手机党,你永远不能体会手机党的悲哀。手机,又称受机、爪机。在相当一部分的手机党面前,视频、动画、图片,以及一部分的网站就是杯具⋯⋯然而,无论是用户还是网络内容/服务提供商,都无法拒绝爪机们的诱惑——它们小巧、随时随地、人手一台⋯⋯ 为了网站开发wap版做准备,今年年初我换了新的3G手机。我的6700c屏幕分辨率是320*240,s40系统,装了opera mini,这样的配置在将来应当算是主流中超级低端了吧。因为web开发本身就常常需要考虑各种兼容性,手上留一台环境最苛刻的设备应该靠谱吧。5月底,开通了联不通的GPRS 500M套餐,打算先多了解手机网站的情况。事实上我把大部分的流量都用在了看世界杯新闻上⋯⋯晚上没有看比赛,早晨醒来一伸手,就能看到比赛结果和最新的消息;上班的路上能接着看一些图片和评论,真的很方便。 一直一直到昨天,我正式接触了手机网站开发。用xhtml mp写了一个简单的查询页面。嗯⋯⋯我一直期待的手机网站开发,正式成为手机党,就从这里开始吧!

Posted in: Life, Mobile, User Interface, 工作整理 Tagged: xhtml, 手机, 手机网站

gallery页面三步走(完成)

July 28, 2010 by dreamer

benny说我写的东西太没条理了,好吧,这次我就尽量一点一点的来说。 gallery是网站中用于显示产品的所有照片的页面。产品照片是通过这样的流程产生的:网友自主提交->管理员人工审核->设计手工加上水印->上传。gallery已经有3个版本,下面会仔细地说说这三个版本,纪录我在做这些工作时候的考虑,从中总结一些可用的方法。 gallery v1.0 启用时间:2006.6-2009.10 页面元数据: – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 2009年bing的图片搜索提供了一种新的界面设计模式——无翻页的缩略图列表(即用一个页面将所有的缩略图列出来,摒弃盛行数年的“分页”模式),分页模式产生于那个屏幕小、用户对信息掌握程度低的年代,它将大量的信息切割成用户容易消化的长度,一段一段的推给用户。时光飞逝,2010年的今天,屏幕变大了,用户页习惯了在屏幕上阅读大量的信息,一个页面呈现所有的信息对他们来说理解起来没有那么困难了。分页反而给他们增加了点击的负担。现在看来我们在4年前就已经有这种理念了嘛⋯⋯Orz⋯⋯ 因为我们并没有一个“缩略图”集合页面,所以“查看大图”的页面也需要至少提供一种提供给用户“浏览全部照片”的可行途径。现在看来,第一版gallery是一个非常“简单”、“实用”的作品,在这个页面能直观地看到所有的缩略图。这个页面并不是我设计的,它工作了相当长的一段时间。 gallery v2.0 启用时间:2009.10-2010.7 页面元数据: – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 v2版本的元数据与v1时并没有变化。改版的起因是我们计划在此页面加入“用户评论”功能。在v1中,每个页面都会在页面下方显示全部图片的缩略图,“用户评论”只能放在这个不定高度的缩略图列表之下,大家感觉这样不太合理。我们同时也希望这个页面“用起来更方便一些”。v2的主要改动在于: 将产品名称单独放在页面顶部中间 将缩略图放入一个固定面积的“窗口”中 将上述窗口放到当前图片(原图)的右侧。 在v3里我又将这个窗口挪回了大图下方⋯⋯ o(>。<)o…… 后来我也扪心自问,为什么要放在右侧……我其实只是参考了无节操百度的图片搜索。更深层的原因是: 大图的宽度仅有800px,小于主流宽度960px,完全有空间在右侧加入缩略图列表;右侧的列表能减少用户浏览图片时垂直方向的滚动;同时,用户在查看大图时就能看到这个列表,他们可能马上就意识到还有其他很多图片可供查看。 带有缩略图的,尺寸很大的“上一张”、“下一张”按钮。这两个按钮是相册潜规则了吧,用户习惯了……所以大大方方show出来吧! gallery v3.0 启用时间:2010.7-? 页面元数据: – 产品名称 – 当前图片(1024px × 768px) – 其他图片的缩略图 任何一次改版都可以看成是要解决某些需求,在v3的设计前,我意识到首先要整理一下我们的需求。 1 gallery页面改版需求分析 1)用户的需求 用户进入这个页面的原因,往往反映了用户的需求。我会经常尝试通过“列出页面入口”的方法来了解用户“为什么而来”。进入gallery页面有三种方法: 点击product页面仅有的一张产品图片(该图片尺寸为240px … [Read more…]

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: css, gallery, html, web, 产品, 相册
1 2 Next »

Categories

  • ACG
  • Flash3D
  • Interaction&Front-end
  • Life
  • Mobile
  • User Interface
  • Visual Design
  • 工作整理
  • 懒人食谱
  • 服务器

Recent Comments

  • dreamer on Kill IE6?
  • 曉行 on Kill IE6?
  • Benny on 互动设计是神马?
  • 人人都爱vancl | Dreamer on 互动设计是神马?
  • dreamer on http协议复习笔记摘要

Tags

3dmax 3Z 403 960 Grid System acg android apache call to action code collada css CSS framework dae Designing Interactions Designing Interfaces diy Don't Make Me Think flash G7 gallery html http httpd.conf ie6 iPad 2 mysql papervision3d php programing PV3D realign shelock holmes wap web window wordpress xhtml xhtml mp 互动设计 产品 便当 凡客 咖喱 手机 手机网站

Copyright © 2025 Dreamer.

Mobile WordPress Theme by themehall.com