界面折纸:设计师获取灵感的有趣方式


  如今应用开发已经成为一个热门话题。对于开发者来说,要使自己的应用脱颖而出,创新的界面是一个重要方面。Clear、Path 等应用都以其独特的界面,为人称道。那么,如何开发独特而好用的界面呢?

  设计师 Juan Sanchez 有一个不错的主意。

  如今的设计工作离不开电脑的辅助,但是 Juan Sanchez 认为,设计师有时候也应该离开电子世界,从现实的物理世界中寻求灵感。为了说明这个问题,他制作了一些界面折纸。


  左边的界面中,通过纸张的折叠来模仿 Clear 界面的拉伸添加条目,右边的界面,则是模仿 Path 中滑动展现分层。在把完折纸的过程中,Juan Sanchez 发现,可以将折叠使用在滑动分层上,即将上一层的信息折叠下来,展示下一层的内容,是一种很有创意的交互方式。


  这种“手风琴”式的界面要素也可以用于展示菜单。另外,如果对某个条目进行操作,是否可以拉起上层,展示下面的操作选项呢?


  通过以上的例子,Juan Sanchez 谈到自己的体验,离开电脑,把玩一下纸张常能带来新鲜的角度。同时,在手中有一个实物原型的好处是,你可以真实的交互和估量它。那么,电子的交互毕竟与物理交互不同,我们是否有必要以受限的物理世界为模板呢?Co.Design 的 John Pavlus 认为 Juan Sanchez 的做法很有意义,因为触屏界面处于数字和物理的灰色地带。

  每一个手势 UI 都是一个谜题:它们提供给我们物体的表象,却没有给予我们从物品中期望的物理可获得性(包括质地、立体感和接触感)。因此用户不得不去用手指猜想。但是,从物理的原型中设计手势 UI(如同 Sanchez)可以鼓励设计师构建更多的“提示”,减少用户的猜想过程。领悟一种手势将会直观的‘揭示’其它可能的手势,从而获得一个无菜单的手势 UI 方案。

  文章来源:ifanr.com

时间: 2024-10-05 02:07:58

界面折纸:设计师获取灵感的有趣方式的相关文章

五彩斑斓折纸课:新宫先生的纸上动物园

折纸是一门颇具门道的艺术,无论繁简,都能体现折纸人的技艺和智慧.折纸更是一项能开发儿童智力.增强孩子动手能力的活动,最近这款AppStore上好评颇高的<新宫先生的纸上动物园>就是充满奇趣的折纸游戏.软件名称:<新宫先生的纸上动物园>价格:12元点击下载更新日期:2013年7月01日大小:114 MB<新宫先生的纸上动物园>不像通常的折纸游戏那样,直接用图纸形式说明折纸的方法,而是以模拟动物园的小游戏来展开,让小朋友折出新的小动物来组成温馨的动物之家,在这个过程,折纸的

清晰3D动画展示 教你折纸试用

折纸是我国的一项古老的艺术,越来越受欢迎,一张颜色单一的纸,经过巧妙的折叠, 就会变成一种种可爱的小动物,不但可以装饰生活,还可以装饰心情. 今天为大家推荐的这款安卓应用就是教你如何折纸,游戏里共有18中物品的折叠方法,包括兔子.鸽子.长颈鹿等等,快来学习一下吧!评测环境评测对象 教你折纸汉化版(How to Make Origami)评测版本 1.0.5软件大小 28.44 MB系统需求 Android 1.6 以上手机型号 HTC Desire S手机固件 Android 2.3.3清新界面

网站设计欣赏:折纸纹理在网页设计中的运用

纸张纹理效果在许多网页设计中都被广泛应用,最常见的比如博客网站,那些记事本纸张背景效果.另外向折纸,纸张的撕裂效果等都十分常用.以下网页教学网收集的这些网站都是使用折纸纹理来设计的,同样的主题不过设计效果完全不同.如果你很喜欢这种效果或正准备设计折纸类主题的网页,那么下面这些将是很好的参考. FT Designer (ftdesigner.net) Noel Design (www.noeldesign.net) Lokalisten Sprechblase (sprechblase.lokal

Photoshop制作折纸特效的天气图标

  今天跟大家一起来学习做个折纸效果的天气预报小图标,主要用到工具是路径,这种效果其实并不难,主要通过光影的明暗层次过度来体现质感与立体效果,喜欢的同学可以学习一下. 效果图: 1.整个图层分类一览 2.制作背景 4.制作太阳 (本人的图层比较混乱 对不住大家了 凑合着看吧,不明白的慢慢体会) 5.制作第二个(太阳分三个图层,椭圆工具变形) 7.制作第三个 8.选区 新建图层制作投影. 9. 滤镜--模糊 10.在家蒙版去掉多余部分 11.调整渐变工具. 12.用渐变工具拉至中间. 13.制作自

PhotoShop制作创意折纸效果LOGO图标教程

PS教程为大家介绍如何使用Photoshop制作折纸效果的logo,其实这种折纸效果非常容易操作,只需要掌握几个通用的PS技巧便可, 制作过程5-10分钟,开始吧. 效果图: Step1 打开photoshop创建一个750*500像素的文件 Step2 在速写外本上画一个基本的构图,确定将要做折叠效果的区域 Step3 为了制造折纸的阴影效果,我们需要将每部分拆分成独立的形状和路径,使用钢笔工具制作如下6个图形 Step4 然后将其组合成如下形状,并用颜色填充,后面的形状颜色要深于前面的. 然

PhotoShop CS6红色折纸字体制作教程

折叠字看似简单,制作的时候还是要非常细心的.总共有三个大的步骤:首先是字体的选择及变形处理;然后把文字转为形状,再按折叠原理对文字局部变形处理;最后就是折叠出的阴影制作及整体质感渲染. 最终效果 1.新建大小自定文档,背景选择白色.选择文字工具输入所需文字,这里的字体为"迷你简菱心". 2.对字体进行适当变形,这里用到了Ctrl + T 右键斜切. 3.在文字层上右击,选择"转换为形状". 4.对各个锚点进行变形,得到满意的效果. 5.根据"折纸"

PhotoShop可爱的立体剪/折纸效果天气预报小图标

今天跟大家一起来学习做个剪/折纸效果的 天气预报小图标,主要用到工具是路径,这种效果其实并不难,主要通过光影的明暗层次过度来体现质感 与立体效果,喜欢的同学可以学习一下! 效果图: 1.整个图层分类一览 2.制作背景 3.制作太阳 (本人的图层比较混乱 对不住大家了 凑合着看吧,不明白的慢慢体会) 4.制作第二个(太阳分三个图层,椭圆工具变形) 6制作第三个 8.选区 新建图层制作投影. 9. 滤镜–模糊 10.在家蒙版去掉多余部分 11.调整渐变工具. 12.用渐变工具拉至中间. 13.制作自

Illustrator设计漂亮折纸天鹅海报绘制教程分享

给各位Illustrator软件的使用者们来详细的分享一下设计漂亮折纸天鹅海报的绘制教程. 教程分享:           好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的设计漂亮折纸天鹅海报的绘制教程解析分享的全部内容了,各位看到这里的使用者们,小编相信大家现在是很清楚具体绘制方法了吧,那么各位就快去按照小编上面的教程自己去绘制吧.

Illustrator创建折纸风格的矢量天鹅图绘制教程

给各位Illustrator软件的使用者们来详细的解析分享一下创建折纸风格的矢量天鹅图的绘制教程. 技巧分享:   第1步:描绘轮廓 你需要对你的设计有个总体的概念.利用照片和钢笔工具(P)描出轮廓.把填充颜色设为无,描边颜色设为黑色,1pt 粗细.这将作为你完成剩下设计的指导.编组 (Ctrl+G)你的线条并在图层面板中锁定这个组. 提示: 把一张图片作为背景来创建你设计的基本形状是个好主意(比如,动物或者物体). 使用矩形工具 (M)在画板上画一个大大的矩形作为背景(颜色随意).   第2步