资讯频道 → 移动开发
阅读更多

1顶
0踩

移动开发

转载新闻 移动设计中的空间节省之道

2012-03-14 15:19 by 正式编辑 nemohq 评论(0) 有3839人浏览
交互设计 生活 UI
设计来源于生活。最近在装修自己的房间，翻阅了一些相关的家居设计资料，发现交互设计和家居设计有很多相似的地方。小户型空间有限，手机屏幕也只有巴掌大小，在两种小空间上进行设计一定很多共通之道。

1、聚　　

即聚拢、收纳，是最朴实的节省空间的方式之一。可以轻松将归属一类的东西聚集起来放一块，办公用品、日常小工具、化妆品、衣服、家用医药等。能装的，都给它装下。


移动设计中也经常使用actionsheet、popover这些“容器”将各种菜单、通知、相关项收到一块。


2、藏　
　
藏和聚有点类似，前者偏向隐而不见，后者偏向归类（有点难理解的话可以想象下冬天衣服打包的过程：先用收纳盒将衣服收起来，然后再扔进衣柜里去，这里就涉及先聚后藏的过程）。如果将一些不经常用到东西都藏起来，藏抽屉、藏衣柜、藏马桶里…会省出很多空间呐。


移动设计中可隐藏的东西有三类：

  1. 有形的控件：如按钮、标签、菜单、导航等；
  2. 手势与重力感应：长按删除、横滑翻页、摇一摇都是这一类；
  3. 操作路径：把不常用的功能或设置项藏得深一点，通过层层递进达到目的。

需要注意的是，藏是一种简单但“略显粗暴”的方式，移动设计不像私人空间，更多是为群体大众设计，他们可不知道你房间的剪刀放在哪。所以，如果是比较重要的特性，提供一些简单的引导提示吧。
　　　　
此外，关于如何设计引导提示，请参考：


3、换　　

替换，即利用共享空间交替展现。当舞台只能容下一个人表演的时候，大家轮流上。家居创意中有很多双用的设计，办公桌与休闲床的翻转交替就完美地演绎了这样一种节省之道。


手机屏幕空间非常有限，一块小小的角落都可以成为兵家必争之地，通过共享空间的利用，可以完成多个界面的跳转及不同状态之间的切换。Tab、slide page以及各种翻转切换都是通过空间共享的方式承载不同的信息。



4、合

合并，咋一看和“聚”有点类似，不过“合并”更偏向融合，不但凑一块，还互不干扰，形成一个整体。沙发床就是一个典型的例子。


移动设计中的合并也常常见于各种组件的组合，如输入框与标签、导航与下拉菜单、网址栏的输入框与取消/刷新按钮等。


5、分　　

在简单收纳的基础上，如果将空间继续细化，分割成不同的“小块”，会使得摆放更有秩序。


九宫格、栅格、区域划分….如果在小屏幕里灵活运用这些格子组合会让界面显得更加整齐。


6、压　　

冬天过了，厚厚的被子、枕头、薄棉衣就收起来，真空压缩袋绝对是收纳的好帮手。


移动设计的挤压案例也蛮多。ios4新增的inbox展示方式就是一种自上而下的挤压处理。除此之外，facebook和path的从左往右的挤压布局最近也特别流行。


7、顺　　

直接利用现有的边角或边缘位置，顺着这些特殊的“点”进行设计。下面的这种组合书架紧靠两侧墙面转角位，这种顺着拐点的巧妙设计可以为墙面节省更多的空间。


移动设计中，这些特殊的区域有那么几种：

  • 屏幕边缘
  • 角落
  • 控件边缘
  • 系统状态栏
如果能够很好地利用这些特殊区域，会有各种意想不到的效果。HiQQ的锁屏设计从原来的“点到点”演变成“点到边”，非常巧妙地利用了屏幕边缘，大大降低了操作密度。



最后，总结下七步法：聚、藏、换、合、分、压、顺。以上7步仅为节省空间的基础原则，实际的情况会更复杂，经常需要组合使用。设计的乐趣也就在此，有章可循却又变化莫测。

那么，你准备好接下来如何收拾自己的房间了吗？

  • 大小: 36.7 KB
  • 大小: 27.2 KB
  • 大小: 42.1 KB
  • 大小: 21.8 KB
  • 大小: 13.3 KB
  • 大小: 21.7 KB
  • 大小: 16.2 KB
  • 大小: 16.2 KB
  • 大小: 23.7 KB
  • 大小: 15.3 KB
  • 大小: 30.2 KB
  • 大小: 24.8 KB
  • 大小: 29.3 KB
  • 大小: 41.7 KB
  • 大小: 22.4 KB
来自: 腾讯CDC
1
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Ext.XTemplate 模板

    配合使用标签tpl和操作符for,可以循环输出张三的朋友： [Js] //使用标签tpl和操作符for var tpl = new Ext.XTemplate( '<table cellpadding=0 cellspacing=0 border=1 width=400px>', '<tr><td colspan...

  • XTemplate介绍

    XTemplate的运行主体，对外使用的变量有$scope，当使用bindData时，变量会按绑定名字注入这个变量。 目前支持两种形式的绑定，单变量绑定和数组。 单变量绑定 是以html中data-bind标记为绑定对象，只要data-bind...

  • ExtJs中XTemplate使用(转）

    本文导读：XTemplate是Ext.Template扩展的新类，它支持高级功能的模板类，如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量，直接执行代码和更多的功能。XTemplate有些特殊的标签和内建的操作...

  • XTEMPLATE介绍

    转载来源：http://docs.kissyui.com/1.4/docs/html/guideline/xtemplate.html

  • ext中的EXT.XTemplate（）

    配合使用标签tpl和操作符for,可以循环输出张三的朋友： [Js] //使用标签tpl和操作符for var tpl = new Ext.XTemplate( '<table cellpadding=0 cellspacing=0 border=1 width=400px>', '<tr><td colspan...

  • Ext.XTemplate2

    var tpl=new Ext.XTemplate(  '名称:{name}',  '',  '',  '编号:{#},书:{book},日期:{date}',  ''  ); tpl.compile();  tpl.overwrite(mypanel.body,data); */ 1.

  • Ext.XTemplate

    Xtemplate 继承自 template,Xtemplate 支持以下这些功能： 1.数组 1) 如果给定的是个数组，他会自动填充，为数组总每一项重复 template 中的 block。2) for=“.” ，会从根节点开始重复，for=“rec...

  • XTemplate

    XTemplate是Extjs里面的模板组件. 下面我们看个最简单的例子. 效果图: js代码: Ext.onReady(function(){ //数据源 var data={ name:"博客园", read:[{ book:'', date:'2007...

  • xtemplate语法

    XTemplate 是富逻辑的 KISSY 模板引擎，面向复杂的业务逻辑场景，同时保持高性能和丰富的配置方法，是易学易懂的模板语言。 一个典型的XTemplate模板实例： Hello {{name}} You have just won ${{value}}! {{#if...

  • Ext.XTemplate 介绍

    配合使用标签tpl和操作符for,可以循环输出张三的朋友： [Js] //使用标签tpl和操作符for var tpl = new Ext.XTemplate( '<table cellpadding=0 cellspacing=0 border=1 width=400px>', '<tr><td colspan...

  • [Extjs] XTemplete for 循环

    //在循环内循环   '{[this.getIcon(values)]}' ,  //声明自定义函数对象 {[this.函数名(所用参数对象)]} fn共有6种对象   '</tpl>' ,   {    getIcon :  function (val) {  //fn函数里有各种参数 out,...

  • sencha Touch 2.4 学习之 XTemplate模板

    XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-t...

  • extjs Ext.XTemplate

    ExtJs4 笔记（4） Ext.XTemplate 模板 《回到系列目录 本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇，但是我个人不是很喜欢那种html混编C#的方式，仿佛又回到了asp的时代。ExtJs的模板同样也可以组织...

  • Extjs学习 XTemplate

    配合使用标签tpl和操作符for,可以循环输出张三的朋友： [Js] 01 //使用标签tpl和操作符for 02 var   tpl =  new   Ext.XTemplate( ...

  • ext.xtemplate

    XTemplate是Ext.Template扩展的新类，它支持高级功能的模板类，如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量，直接执行代码和更多的功能；   Ext.XTemplate类常用的方法如下：  applay...

  • ExtJs2 0学习系列 11 --Ext XTemplate

    ExtJs2 0学习系列 11 --Ext XTemplate

  • "SMART 200系列地址库：灵活配置的位读写系统",SMART 200 寻址-库 6个子 位：一个读，一个写 读：例如 读取从V0.0开始的第N个位的状态 写：例如 将值写入V0.0开始的第N个位

    "SMART 200系列地址库：灵活配置的位读写系统",SMART 200 寻址-库 6个子 位：一个读，一个写 读：例如 读取从V0.0开始的第N个位的状态 写：例如 将值写入V0.0开始的第N个位中 起始地址和第几个位都可自定义 字节：读写一体，引脚控制读或写 字：读写一体，引脚控制读或写 双字：读写一体，引脚控制读或写 实数：读写一体，引脚控制读或写 ,核心关键词：SMART 200; 寻址-库; 子位; 读; 写; 起始地址; 自定义; 字节; 字; 双字; 实数。,"SMART 200库：位寻址与多读写功能"

  • perl-ExtUtils-Manifest-1.61-244.el7.x64-86.rpm.tar.gz

    1、文件内容：perl-ExtUtils-Manifest-1.61-244.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-ExtUtils-Manifest-1.61-244.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

  • 多水下航行器协同定位的MATLAB仿真：基于《Cooperative Localization for Autonomous Underwater Vehicles》的研究与实践,7MATLAB仿

    多水下航行器协同定位的MATLAB仿真：基于《Cooperative Localization for Autonomous Underwater Vehicles》的研究与实践,【7】MATLAB仿真 多水下航行器协同定位，有参考文档。 主要参考文档： 1. Cooperative Localization for Autonomous Underwater Vehicles，The International Journal of Robotics Research 主要供文档方法的学习 非全文复现。 ,MATLAB仿真; 多水下航行器协同定位; 参考文档; 自主水下航行器; 机器人学国际期刊; Cooperative Localization。,MATLAB仿真：多水下航行器协同定位研究参考国际期刊论文

Global site tag (gtag.js) - Google Analytics