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

2顶
1踩

移动开发

转载新闻 从小户型家装看移动交互设计

2011-12-08 14:10 by 正式编辑 sherry617 评论(0) 有3195人浏览
交互设计 UI
随着移动互联网的发展，越来越多的网站和应用开始向移动设备上迁移，如何在这么小的屏幕上更好地展示内容，成为了众多设计师头疼的事情。其实，你可以从生活中获取灵感，比如目前盛行的小户型家装设计，就和移动交互设计有很多共同之处。

一、减少不必要的

家装设计

在小空间设计上，不能要求面面俱到，要懂得牺牲的魅力。开放式设计可以让空间得到最大的利用，将卧室、客厅、餐厅打通，形成大空间态势，减少固定笨重的装修，用灵活可变的轻质隔墙，甚至滑轨拉门或其他可移动家具来取代原有的密闭隔断墙，既节省空间，使居室更显通透感，同样也可以让你拥有独立的空间。



床头部分可以增加弹簧，白天收起增大活动空间，晚上睡觉时再放下。



手机交互设计

1. 精简内容

手机界面尺寸比较小，又要考虑符合手指点击的面积，所以往往不会像web页面中把详细分类及信息全都铺出来，导航条也不会像web界面设计中的细长的一条，只能精简内容显示最常用的几个版块。



2. 隐藏菜单

对于占空间比较大，在特定情况下才需要的东西可以设计为隐藏菜单，需要使用时再显示出来。



二. 纵向发展

家装设计

将床面抬高，不知不觉中增加了床面以下的可利用空间。



继续抬高床的高度，下面的空间可以作为衣柜和书桌空间。



手机交互设计

列表页的设计，现在的智能机最大的特点就是用到手指的动作，所以列表页长一点没关系，用手指滑动上下或者左右翻页比web界面上的翻页效率高出很多。

1. 信息量比较大的表格结构的列表，这种页面在web页面中显示时会出现纵向滚动条，在手机交互设计中多数用上下滑动。



2. 如果做分屏设计的通常使用横向滑动，横向滑动的特点是一次滑动一屏，但是想一次只移动一点点的话就不适合做横向滑动了。



3. 还有一种分享类型的列表，由于不停的会有新的分享图片出现，更新频率比较高，所以图片排列比较密集，为方便用户自由控制移动多少位置通常也采用上下滑动。



三. 功能区共享

家装设计

在居室有条件的情况下，我们会让各个空间独立，比如说：我们会单独设立客厅、餐厅、书房等等。但如果是小户型，就没那么多房间可供你划分，我们接触最多的是零居室，也就是说只是一间房，甚至于厨房都是敞开的，只有卫生间是独立的。因此，许多空间必须是重叠的，甚至于是单一空间多用途。

餐桌可以成为书桌，还可以兼顾吧台的作用。



榻榻米可以成为客卧，同时它又是个书房。



手机交互设计

由于空间有限，功能区共享的设计随处可见。

1.  一个区域的不同位置有不同功能。

例如在大多数读书软件中，阅读中的屏幕上显示的是书的正文内容，单击页面左侧时书向左翻页，单击页面右侧时书向右翻页，单击屏幕中央区域，书页的上下空白处分别会出现一些功能菜单。 这就是在一个一页书上共享了翻页、章节选择、进度调节等许多功能的入口。



2. 一个按键长按和短按有不同功能。

例如iPhone键盘英文输入法时，短按一个字母键输出英文字母，长按字母键时会弹出相似的拉丁文常用字母。



3. 对一个区块施加不同的动作有不同功能。

例如iPhone中的列表记录，当单击某条记录时，是查看该记录的详细信息，当选中某条记录并用手指进行横向滑动时，此时会在相应的列表记录旁边出现一个醒目的红色删除按钮，点击按钮系统则自动删除此信息。



总结

还是那句话，交互设计无处不在。在我们的日常工作中，很多地方都可以借鉴生活中积累的经验。

  • 大小: 69.7 KB
  • 大小: 65.2 KB
  • 大小: 109.3 KB
  • 大小: 85.5 KB
  • 大小: 73.1 KB
  • 大小: 77.6 KB
  • 大小: 121 KB
  • 大小: 119 KB
  • 大小: 132.2 KB
  • 大小: 111.9 KB
  • 大小: 105.2 KB
  • 大小: 101.3 KB
  • 大小: 91 KB
  • 大小: 96.4 KB
来自: 携程UED
2
顶
1
踩
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

  • 72xuan装修设计软件 3.0.3

    72xuan装修设计软件拥有找户型、找产品、设计样板间、渲染效果图、网络库房、报价清单等强大功能，并支持业主自己手动DIY设计毛坯房及样板间功能，依靠强大的立体户型库和产品库，可全面、便捷、轻松的完成DIY室内...

  • 【转】生活中的交互之小户型设计

    与小户型设计及其相似的还有近些年来兴起的手机交互设计。现在各个企业都如火如荼的进行着手机客户端的设计开发，手机界面尺寸有限，如何尽量少的形式表达出用户真正的需求，又让用户有好的体验呢？   1. 减少...

  • 移动手机产品设计空间节省之道

    最近在装修自己的房间，翻阅了一些相关的家居设计资料，发现交互设计和家居设计有很多相似的地方。小户型空间有限，手机屏幕也只有巴 掌大小，在两种小空间上进行设计一定很多共通之道。携程UED的同学也是心有灵犀，...

  • 移动设计空间节省之道

    最近在装修自己的房间，翻阅了一些相关的家居设计资料，发现交互设计和家居设计有很多相似的地方。小户型空间有限，手机屏幕也只有巴掌大小，在两种小空间上进行设计一定很多共通之道。携程UED的同学也是心有灵犀，...

  • 房屋装修全配

    装修基础知识 装修流程步骤详解 准备阶段 前期咨询 现场量房 设计报价 签订合同 材料采购 证件办理 施工阶段 开工交底 拆改成保 水电工程 泥木阶段 油漆壁纸 成品安装 竣工验收 入住阶段 开荒保洁 家具家电 软装搭配...

  • WebGL的3D家居创意设计踩坑手记

    装修设计模块介绍 接下来说说装修设计模块的实现，这个模块主要的功能是模型的交互（加载、移动、旋转、缩放和删除）、更换壁纸、加入一个漫游视角、还有场景的保存。先放几张这个模块的截图 目前不展示展开的家居...

  • VR家装丨颠覆传统，让家装谈单更轻松

    VR家装可以根据不同的装修要求将真实家装效果1：1还原出来，从设计方案到家具摆放，通过虚拟现实技术，在施工开始之前就可以体验到各种设计方案的实际入住效果，实现硬装、软装、家具、家电的与装修体验。...

  • 第06课：生活中的中介模式——找房子问中介

    我们看一下如何设计它的结构。 上图中 DeviceUtil 其实就是中介者，客户端界面通过 DeviceUtil 这个中介与设备进行交互，这样界面类 ClientWidget 就不用同时维护三个 DeviceMgr 的对象，而只要与一个 DeviceUtil 的...

  • 与全景图不同，老子云云服务让你动态交互玩模型

    当想去一个陌生的地方时，我们会立即想到手机（移动终端）应用，各种地图，各种搜索，通过三维街景图任意放大，变换角度提前了解一下目的地的周边情况。 眸瑞科技历经四年研发打造老子云技术，与三维全景图不同...

  • 基于java的物业管理系统设计与实现

    基于java的物业管理系统设计与实现 I. 引言 A.研究背景和动机 物业管理系统是指对物业进行管理和服务的系统，该系统需要具备对物业信息、人员信息、财务信息等进行管理的能力。基于Java的物业管理系统设计与实现的...

  • 老子云：移动实物数字化智能时代来临！

    工业智能制造、人工智能家居、秒建...其实未来，已来，老子云技术将一切实物数字化备受行业期待，同时也标志着移动实物数字化智能时代的来临。 1.强大的压缩技术 为什么老子云技术深受行业人士期待？特别是设计、...

  • 三年服务百万家居设计师、十万商家，淘宝躺平平台的底气在哪里？

    2018年，互联网家装在行业中的渗透率还不到6%（数据来源：亿邦动力《2018年中国家居健康消费白皮书》），人们纠结、疑惑：为什么看起来美好的模式就是不行，到底什么才是数字化家装真正的破局方式？ 大量玩家仍然在...

  • 智慧小区弱电智能化设计方案（小区对讲系统和停车管理系统）

    根据小区的户型结构和甲方的具体要求，我们设计采用总线型数字化联网（即基于TCP/IP通信协议的数字化楼宇对讲系统）彩色可视对讲门禁系统。可以实现呼叫、对讲、监视、开锁、紧急报警等功能，同时可扩展信息接收与...

  • 基于Springboot的漫画网站--论文.zip

    Java项目基于springboot的课程设计，包含源码+数据库+毕业论文

  • Java毕业设计-SpringBoot+Vue的分布式架构网上商城（附源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • GUI面板MATLAB漂浮物识别.zip

    GUI面板MATLAB漂浮物识别

  • 【工程项目】MATLAB道路桥梁裂缝检测[不同类型，GUI界面，Bp算法].zip

    【工程项目】MATLAB道路桥梁裂缝检测[不同类型，GUI界面，Bp算法]

  • Delphi 12.3控件之高仿银豹手机APP 1.0.zip

    Delphi 12.3控件之高仿银豹手机APP 1.0.zip

Global site tag (gtag.js) - Google Analytics