工坊首页|
日志类别：Thoughts
标签：
在图形界面设计中，手风琴面板是垂直堆放的一列项目。每个项目可以”展开”显示其中的内容。根据结构的不同，同一状态下可以有零个至多个项目被展开。 这个术语来源于手风琴这种乐器，因为其风箱的每个部分可以向外拉伸。 手风琴面板同选项卡式界面相关，后者是水平排放的一列项目，其中只有一个项目的内容展开呈现在窗口中。 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，很山寨啊！哈哈
来自台湾的智慧型互动更衣室，这个更衣室能记录你的喜好和过去的购买或者试穿历史，还能根据你的需求自动变换更衣室环境和音乐，很概念化的一个设计。这回台湾的作品都挺出彩的，一个是交互的概念更多延伸到了日常环境，比如商场，比如家居，另外还有个动画短片《神画》也赢得了大家的赞许，点击去这里观看
更多资源Fluid 960 Grid System
The 1KB CSS Grid一个非常轻量级的栅格系统，简单易懂。可定制，但默认宽度只能是960px.
Variable Grid System基于960栅格系统的一个简单灵活的CSS栅格生成器。
Grid-Based Design Gallery如果你对960栅格系统仍持怀疑态度，或者想知道栅格化设计能够给作为网页设计师的你带来什么，那推荐你看看这个设计集。正如你所看到的那样，只需要一点点想象力和独创性，没有什么不可能。
Typogridphy一个方便网页设计师和前端工程师快速建立适合印刷的栅格布局的CSS架构
Tiny Fluid Grid这是上面提到的那个1KB CSS Grid的栅格生成器
格子之外无可否认，即使960GS有再多的可能性和灵活性，你也会发现它的局限性。没人要求所有网站必须建立在栅格之上，这会导致普遍的创造力缺失和页面布局的单一。 当你尝试使用960GS，你会发现有许多种打破布局的方法，这会促使你重新思考你的设计。 960栅格系统同其他任何相似的系统一样，它们只是提供了一种强大的根基，很多时候你会发现建立一个网站，你不需要打破那些基础的模型也能创新，而你需要的是更清晰更有逻辑地传达信息，以一种广大用户更熟悉的方式。 当你看着上面这些图，把每个深蓝色的条块当成是960栅格系统中的一个CSS类。如果你需要创建一个宽度和那些深蓝条相同的区域，你只需要把相应的类值放进你的div里，就行了！ 类都简单根据它们的大小来命名，grid_1是最窄的，grid_12是最宽的（16栏中grid_16是最宽的）。 重新再来看上面那两张图，不过这次不要考虑宽度，想想它们各自所代表的CSS类。 这样的命名系统使它能在短时间内搞定复杂的布局。要填充一个页面的宽度，只需要记住类的数字加起来等于12（12栏）或者16（16栏）就行了。 比如说，使用12栏的版本，如果需要3个并排的文字分区形成3栏式布局，只需要为每一个分区赋予grid_4的类使它们加起来等于12.
相同的，如果采用16栏版本，想要4列并排的布局，那也是每列赋予grid_4的类，加起来等于16.
为了确保调用正确，记得把你放12栏元素的div加一个名为container_12的类，同样为16栏元素的div加一个名为container_16的类。 如果你从来没有用过960栅格系统，我相信你现在一定已经明白原来使用栅格系统快速建立布局是如此简单的事。 左右移动通过push和pull CSS class，可以实现横向的移动每一个栅格系统里的元素。 以下面两个布局为例，前一个是标准的使用grid_3 class的4栏布局，后一个则是分别对第一列使用了push对最后一列使用了pull的效果。
你可以随心所欲定义移动的长度，如果想向右移动2列，那就是push_2,以此类推。 push/pull的设定对用html来呈现页面也有很大的影响。 举个例子，在下面这个布局中，想像logo处是网站的logo，它是整个页面上的第一个元素。作为页面上最重要的元素，你希望在html里把它放在首位。但视觉上，你又希望它呈现在页面的顶部中间。 在使用push/pull之前，
如果要使logo在视觉上居中，你需要这样写： <div class=”grid_6 push_3″> <div class=”grid_3 pull_6″> <div class=”grid_3″> <div class=”grid_12″> 然后你就得到了这样的布局：
既保证了logo在html中居首位，又保证了视觉上logo居中。 大片空白区域你会发现你经常希望创建一些空白区域，这时候你可以使用prefix和suffix的class，使用方式和push/pull相同。 比如你想在一个元素前留下一列宽的空白区，就用prefix_1的class，如果空白在后面，就用suffix_1.
上面是用了suffix_3在grid_6之后创建了一个宽度为3列的空白区。 开始和结尾最后一点，你可能会用到alpha和omega类，表明栅格中的子栅格，alpha是第一个子栅格，omega则是最后一个。本质上，这些类提供了合适的外边距，方便在栅格之间再构建栅格单元。 回顾一下学完上面这些内容，你现在可以称之为一个960栅格系统专家了。 有5个概念你需要记住： 1. 12格使用container_12的类,16格使用containeer_16的类。 2. 使用class grid_1,grid_2,grid_3…来设定你的列宽，如果想横向填满页面，确保数字加起来等于12或16. 3. 使用push/pull来单独移动每个栅格，不会影响到html里写入的位置。 4. 使用profix/suffix来创建空白区域。 5. 使用alpha/omega为嵌入的栅格设定外边距。 960栅格系统里同样包含一份CSS Reset，它是基于更为流行的Eric Meyer CSS reset创建的，如果你喜欢就留着，不喜欢就扔了吧。 |
Lifestream
|
