工坊首页
所有发布在 ‘UI & UE’ 下的日志在图形界面设计中，手风琴面板是垂直堆放的一列项目。每个项目可以”展开”显示其中的内容。根据结构的不同，同一状态下可以有零个至多个项目被展开。 这个术语来源于手风琴这种乐器，因为其风箱的每个部分可以向外拉伸。 手风琴面板同选项卡式界面相关，后者是水平排放的一列项目，其中只有一个项目的内容展开呈现在窗口中。 In a graphical user interface, an accordion is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration. The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward. An accordion is related to a tabbed interface, a horizontal list of items where exactly one item is expanded into a window ——–Wikipedia 手风琴面板的设计目的：
下面是几种常见的手风琴面板形式： 形式一：左侧箭头。由向右和向下的箭头组成。向右表示折叠状态，向下表示展开状态。根据结构的不同，可同时展开0至多个面板。在下面的例子中，例1可同时展开0-1个面板；例2中，可同时展开0-多个面板
形式二：左侧加减符号。加号表示收起状态，减号表示展开状态。根据结构的不同，可同时展开0至多个面板。
形式三：无箭头指示，但鼠标会有触发行为。在下面的例子中，例1是鼠标直接滑过触发展开收拢面板；例2鼠标滑过会使面板变色，点击后触发展开收拢。同时展开1个面板
形式四：右侧箭头。以上下箭头表示收起展开状态。向上箭头表示展开状态（可收起），向下箭头表示收起状态（可展开），不过也有相反的，如下图例3，上下箭头分别表示收起和展开状态
有幸收到UI AWARD2010总决选门票，毫不犹豫跟领导申请了旷工参加。到了现场才知道原来就跟互联网大会在同一个地方，大概这是UI界第一次能在互联网大会上占一席之地吧，衷心希望将来UI界能在互联网圈子取得更高的地位。 大会上午半场主要是UI AWARD2010总决选暨中国用户体验设计高峰论坛，下午是2010首届移动娱乐应用大赛。名字都很长，很难记，体验不好，呵呵。本来以为今天会宣布获奖名单，后来才知道最终获奖名单会在将来台湾的一场大会上宣布。 现场使用QQ影音播放器播放各参选作品视频，却频繁出现格式不支持，无法打开之类的错误，很多选手的作品都没能得到充分展示，不过主办方承诺会后所有提名作品视频都会重新整理后放到土豆上。主屏幕右侧的小屏幕上是特意为现场会议准备的新浪微博展示，鼓励大家现场发微博参加抽奖活动，只可惜微博延迟比较严重。大概因为是第一届，经验不足，会议准备还是不够，不过UIRSS的Hiboo徐海波真的是忙前忙后，挺辛苦的。 不管怎样，有幸在现场听到移动，腾讯CDC，盛大，搜狐，EICO等等设计团队的演讲，还是挺受益的。 坐在我前面的两位成都朋友也都入选了个人组提名，只可惜两人的作品视频QQ影音都播不出来，先在这儿给来自家乡的选手加油，预祝他们最后能胜出。 简单放几张照片，更多入选作品请自行前往UI AWARD2010官网或者UIRSS查看 大会现场
主屏幕右边的微博屏，时不时出现一点不和谐内容。左边腾讯CDC主管正在讲着，右边屏幕上出现这么一条：腾讯最近出了个葫芦娃大战群妖的Webgame，很山寨啊！哈哈
来自台湾的智慧型互动更衣室，这个更衣室能记录你的喜好和过去的购买或者试穿历史，还能根据你的需求自动变换更衣室环境和音乐，很概念化的一个设计。这回台湾的作品都挺出彩的，一个是交互的概念更多延伸到了日常环境，比如商场，比如家居，另外还有个动画短片《神画》也赢得了大家的赞许，点击去这里观看
为什么我需要一个网格系统？960栅格系统和其他类似的工具提供了快速简便的方法来用CSS创建基于网格的布局。它们提供经过跨浏览器测试后的优化的预设列宽来给你放进内容。 在CSS3之前，要想不通过冗长的数学运算就把页面分好栏，几乎不可能。 例如，如果你有一个1000像素宽的容器，你想分成三列，那每栏就是333又1/3像素（不是个舒服的整数）。此外，这样分出来的列会彼此撞上，因此又需要每边加上外边距。如果每列设定一个10px的外边距，就必须把每列的宽度各减少20px。这样就是3列，每列313px，加上每边10px的外边距。即便如此，整个的宽度也只有999px，而不是1000px. 3栏下面又想分个4列，那你就得从新算过。从1000px里减去外边距的80px，再把剩下的920px除以4，得到每列宽度230px. 最后，如果你想给页面加上一个占页宽1/3的侧边栏，你需要给你的内容区留下750px，侧边栏250px，减去外边距40px，得到一个730px的内容区和230px的侧边栏。 晕了么？别的设计师也这样晕过。当然这不是什么复杂的火箭科学，但你一定不会想在接手每个项目后一遍遍重复这个过程。 解决方案？找别人来搞定这些疯狂的列宽，把它们全丢进CSS文件里，你只需要免费下载就行了。（这个人正是Nathan Smith，960栅格系统的创建者） 960栅格系统
960栅格系统，简单来讲，就是用960宽度的网格来布置网站的方法。 使用960宽度的原因在于，考虑进列宽和外边距的因素后，以960来分，可以得到多种干净的整数列宽。而且，它在大多数屏幕上有不错的现实效果。 960栅格系统有两种主要变体：12列格和16列格（24列格也同样包含在内，以便万一有额外的需要）。 在12列的版本中，最窄的列宽为60px，之后每列增加80px. 因此，可用列宽为60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860和940.
同样的，在16列的版本中，最窄的列宽为40px，之后每列增加60px. 可用列宽为：40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880和940.
（待续。。。） 最近在学习栅格系统（网格系统），找到这篇文章，挺有帮助，打算分成几次翻译过来。 ——————————————————————————————————– 译自Jacob Gube的The 960 Grid System Made Easy 第一次发现960栅格系统这个东东时，我很兴奋，觉得用它可以轻松地实现各种复杂的布局。 但因为我当时是刚接触网页设计，当我下载完栅格系统的文件，很快就被它吓到了，因为它看上去真的挺复杂。 这么多的代码，要创建一个页面怎么可能简单呢？ 这篇文章给那些对栅格系统感兴趣但又对它无从下手的设计师和前端开发人员。 这里主要探讨960栅格系统，但我相信，读完这篇文章，你会发现其他类型的栅格系统也都是相似的，基本原理都是相通的。 栅格化设计在我们进入具体的960栅格系统之前，先让我们简单讨论下栅格化设计。其实栅格化设计的概念并非起源于网页，它源于一个古老的非常基础的设计原则：对齐。 我们的大脑喜欢把事情简单化，使他们容易理解的。这就是为什么我们试图给混乱强加上一定的规律，就像看月球上环形山时我们会说看到一张脸。 我们附加的规律越简单，大脑就可以越快辨别出模式从而快速理解。 网格是如此有组织，有秩序，他们几乎不需要我们的大脑去做思考和解释。 比较下面两种页面布局：
虽然这两个布局都是简单的矩形集，但上面那个根本上要优于下面那个。我们可以立即识别模式，接受它，然后继续前进。 下面那个布局，相比而言就要混乱很多。没有明显的模式，规律，或目标，看上去就像一堆随机的形状集合。 我们的眼睛有一种倾向，一边疯狂寻找瞬间片段，一边又要试图找出一种趋势，这增加了接收整个场景的时间。 值得注意的是，随机也可以美丽。在自然界，艺术甚至设计中，随机或者说无序都有它的一席之地，但要合乎逻辑地组织信息，随机显然就不适用了。 重点在于，网格是创建页面秩序最简单最强的方法之一。他们可能看起来有些冷酷和僵硬，但要记住，它们都是非常快捷有效的，甚至可以很灵活，只要你不要让自己的想象力陷在这些必要的框框里了。 在费城的Web App Masters Tour上，PA Mark Trammell介绍了Twitter让新用户变成忠实回头客的方法。其间谈到了产品服务的三种层次，分别以磁铁，钩子和胶水来形容。 磁铁：吸引人们去使用某种产品，但无法留住他们。以Twitter为例，名人就是Twitter吸引人们来访的一个强力磁铁，但人们往往不会因此就选择留下 钩子：会把离开的人重新钩回来。家庭成员之间的联系和各领域的专家让人们真正迷上了Twitter 胶水：混合着新闻与消息来源，名人，亲朋好友和本地化商业信息的胶水，只要混合比例适当，才能最终真正粘住用户。 有点意思，摘记下来。 |
Lifestream
|
