APP界面设计文章及欣赏

22个iPhone食谱APP!餐饮类界面设计参考

蓝蓝

各色各样的餐饮类app界面设计

Recipes and Grocery List – BigOven

超过250000种食谱(包括你的和你朋友的),有了它,你的手机就是一个可移动的食品杂货铺和菜单!超过七亿下载,围起来可绕地球N圈!

Real Recipes

Real Recipes(iPhone和iPod touch有)为你提示做美食需要的工具、简单的食材等。里面有灰常多其他用户分享的食谱或者你自己的哆啦a梦菜谱口袋、食物计时器的闹钟等~对了!还有一个配方微调器,就是你可以在短时间内根据自己的需要调配完美的食谱,还有详细的烹饪教程哦~

IOS用户体验设计:如何构建交互模式

蓝蓝

Isolated blank book front

如何构建交互模式(选自《iOS用户体验设计》)

一个工作流可以产生大量的交互模式,在功能上每种模型都可以很相似,但在用户体验上差异就会很大了。如何通过具有特色的交互方式创建超越同类用户体验的应用就显得至关重要了。

工作流的定义是所有交互设计活动的基础。我们就是在定义工作流的过程中确定用户与应用的交互方式。你可以根据想要实现的目标,在多种不同的层次上对其进行定义。在有些情况下,你只需要抽象地定义工作流,而不必关注其功能细节和具体的交互方式。这对确定功能集和一般流程之间的关系是很有价值的。而在另一些情况下,你则需要定义用户可能会碰到的所有交互、事件以及状态变化的逻辑,以清晰地勾勒出整个应用程序的操作方式。

亚马逊购买《iOS用户体验设计》

为了进行交互建模,你需要更为详细的工作流,而不是抽象且高层次的工作流,但也不需要过于详细。交互模式的详细程度取决于应用的性质。下面详细剖析如何构建交互模式:

如前所述,交互建模是对应用的整体交互行为进行定义,并规范如何运用或规划这些交互行为来为用户创建具有一致性的、易于理解的交互模式。《iOS用户体验设计》第2章介绍了作为iOS用户体验基础的概念模型和空间模型。分层平面和空间模型这两种概念共同组成了iOS的基本交互模式。可以看到,如果你能够合理运用这些概念,它们就能发挥出巨大的力量。(参见图1-1)

ue1

图1-1 iPhone中体验到的iOS空间模型

Default Plane 默认层
Underlying Plane 隐含层
Superimposed Plane 叠加层

在开始交互建模时,你需要以一种抽象的方式进行思考。你不需要考虑具体的功能和内容,而要考虑应用所可能采用的各种不同的交互行为,由此来了解如何使用它们来控制界面上的元素。iOS为我们提供了大量的可选方案,比如,缩放、拖移、轻扫、滑动和滚动,等等。无论是单独使用还是结合使用,这些手势都可以用来创造出有趣的效果和截然不同的交互方式。

天气遇上情感化设计—–折纸天气的诞生

蓝蓝

715-198(1)
“hi,小米,明天一起去园博会哇?”
场景1:“好阿,等等…我查下天气。… 见鬼!明天下雨,只能改天了。”
“….(好失落)”
场景2:“好阿,等等…我查下天气。… 太好了!明天阳光灿烂,走着!”
“走着!!”
不要误会,这里不是社交平台,也不是约会场合,以上两种不同场景所带来的不同心情,在你查看天气情况时是否也遇到过?为什么越来越多的产品都融入了情感化的设计,其实产品的使用者,也就是我们都是情感化的动物(高级动物),在使用任何产品时我们都会有相应的心理诉求,如果你没发现的话,那只是你还不善于观察自己。

设计更优的移动支付流程

蓝蓝


1

译者注:在电子商务中,我们发现用户在支付环节的流失率非常高,支付流程的用户体验是至关重要的环节。本文介绍了一些移动端支付流程的方法,怎样让我们的支付流程更加易用。业余时间翻译了这篇文章跟大家共享,若大家发现任何错误,欢迎随时给予纠正。

原文地址:designing-a-better-mobile-checkout-process

数据显示越来越多的用户具有使用智能手机进行付款的倾向。“ 这些用户愿意在移动设备上完成购买吗? ”这个问题得到了迅速回答。2012年,美国移动电子商务销售额飙升81%,形成了250亿美元的市场。

值得注意的是,这些成交贡献只有一部分来自于app。根据调查显示,61%-81%的用户更倾向于在移动端的网页上来完成购物的各种操作:研究商品和价格,查看商品详情,参加促销活动,下单和支付等。比起功能相互独立的app,他们更倾向于在浏览器中来进行购物(来获得浏览与支付环节之间的无缝体验)。

让我们深入看一些移动端结账流程的例子。

1、 只保留重要信息

我们也许都回答过很多令人讨厌的问题,比如“你是怎么知道我们的?”这样的问题可能是对商家有用,对消费者来说没有任何作用。然后这些消费者需要付出辛苦赚来的钱,他们也更有权力决定是否关闭这个页面。

虽然这些问题在网页上不那么重要,但是在移动端却是致命的。让我们来看两个例子

“炫动”你的屏幕——移动产品中的旋转木马模式

蓝蓝

移动产品设计中,图片传达的信息比文字更直白、美观、容易吸引用户注意,所以在产品中引入大量图片资源也成为设计师喜爱的方式之一。
今天我们在文中要介绍一种的缩略图浏览方式——旋转木马模式(Carousel)。

手机产品设计之用户引导

蓝蓝

useredu1 手机产品设计之用户引导

在手机产品的设计过程中,由于手机界面的承载能力有限,产品功能的不断膨胀,必须要在用户打开应用之后告知他某些新奇的功能,引导他完成某些主要任 务流程,让用户不至于迷失在陌生应用中不知所措。帮助用户快速掌握应用的使用方法,体验到应用的乐趣,新手引导成了一个必须考虑的设计环节。

用户引导的直接目标是帮助用户更好的使用产品,终极目标是提升用户满意度。虽然,大多数情况下,我们可以通过合理的设计,尽可能的简化功能,让用户 无需引导和帮助,就可以完成必要的任务。但是实际上,手机产品的限制和对强大功能的追求,导致这个目标很难达到,因此越来越多的应用开始使用用户引导来帮 助用户快速熟悉产品。


杂志类网站客户端的阅读体验

蓝蓝

随着苹果iPad的推出,电子杂志类行的应用大受好评,电子阅读需求量不断增长。传统纸质出版物的良好的视觉效果,互联网巨大的信息资源库,将这两者集合在一起就会诞生非常好的杂志客户端应用。这种杂志型客户端应用的最佳代表就是Flipboard。

2010年iPad最佳应用是Flipboard。集合了Facebook和Twitter的推动内容,辅以格式排版,让用户得到了无限量的优秀资源以及良好的阅读体验。

如何做app界面设计?

蓝蓝

蓝蓝注:此文有些图片没有显示全, 下载此文及图片请点http://www.lanlanwork.com/what%20to%20do%20APP%20ui%20design.docx


用户在面对移动应用时,心态有三大特征:第一是微任务,我不会拿手机写一篇论,不会从头到尾看一部电影,使用是随时随地的;第二是查看周遭,也就是我所处的环境。我可能会打开手机,看有什么好的馆子,有什么好的电影,打折团购等等;第三个是无聊,很多移动用户更多情况是无聊的,打开手机,从左到右的翻,翻到最后再把手机关掉。

 

针对这三种特征的心态,我们怎么样去面对?第一,应用最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸;第二个要满足用户的情景需求;第三个要帮助用户去消磨时间。

 

设计师的角度谈 iOS 7 的界面设计

蓝蓝

虽然 iOS 7的界面设计引来不少吐槽口水,但李的观点是“苹果的缺点一般都不会出现在大方向上,即便有缺点也只是在某些个别的零件上。”这篇文章我将站在一个设计师的角度谈 iOS 7 的界面设计。

  在谈 iOS 7 的界面之前,我先说说我对“扁平化”的认识。 iOS 7 发布之前大家都在猜测苹果会不会把界面改成“扁平化”风格?什么是“扁平化”的界面设计风格?去掉材质机理去掉投影渐变,整个界面看起来扁扁的平平的就是“扁平化”的设计风格吗?如果是这样理解“扁平化”三个字的话,那大家怎么理解“知识扁平化”这个词?

  我认为“扁平化”的界面设计风格,真正意义上指的是界面设计上信息层级的扁平化,而不单纯只是视觉效果的扁和平。WP 系统的“扁平化”设计把很多信息变得模块化,并且压缩信息展示层级,很多原本藏的比较深的信息可以在首界面上直观呈现。

  如果只是扁扁平平的视觉设计风格的话,我们压根不需要把界面设计孤立出来看。广告界的平面设计,书籍装帧的封面设计等等,在很久很久以前就已经实现所谓的“扁平化”了。况且我们最开始用的电子产品,在显示器还是马赛克的时候,那不就是最平的“扁平化”吗?实际这种极简式的点线面构成式的现代主义设计风格起源于建筑设计,并早已经在广告设计,服装设计,工业设计等领域普及了。

  所以“扁平化”在界面设计界压根就是一个可有可无或早已有之的概念,完全没必要大肆渲染,只是IT 界的设计一直比其他领域的设计理念落后很多。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档