B3 bohemia's - 坚持创新，给设计多一点乐趣 » iphone http://blog.b3inside.com User Experience.Art and Design.Photography.Bohemia and You Thu, 02 Sep 2010 14:24:20 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 iPhone应用设计趋势 http://blog.b3inside.com/design/iphone-app-design-trends/ http://blog.b3inside.com/design/iphone-app-design-trends/#comments Thu, 26 Nov 2009 06:51:57 +0000 波希米亚 http://blog.b3inside.com/?p=836
  • 开发iPhone版校友录
  • 网页设计趋势发展历程之2009下
  • 网页设计趋势发展历程之2009上
    • ]]>     iPhone App Design Trends
    Smashing Magazine版权所有
    作者：Smashing Magazine
    译者：UCD翻译小组，波希米亚
    原文地址： http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/

    在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。

    本文探究了如何让设计师利用图形元素和屏幕交互，制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意，这些未必是设计和可用性中的最佳观点。

    1. 镜像iPhone原生界面元素

    “告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。”（译者：作者在表达她当时的感受吧） 在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。

    Facebook (iTunes Link)
    在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。

    facebook

    Where (iTunes link)
    Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。

    where

    Tweetdeck (iTunes link)
    Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。

    tweetdeck2

    2. 简化界面

    也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？

    提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。

    Facebook Animation in iPhone App Design Trends

    Flickr (iTunes link)
    Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。

    flickr

    3. 模拟硬件界面

    不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。

    Convertbot (iTunes link)
    Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。

    convertbot

    Little Snapper (iTunes Link)
    Little Snapper模拟的就是一台普通数码单反的旋钮。

    littleSnapper

    iHandy Level (iTunes Link)
    iHandy Level的样子和功能都仿至一个真实好用的水平仪。

    iHandy_level

    Where To? (iTunes Link)
    这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。

    where_to

    4. 丰富、漂亮的列表视图

    当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位“geek designer”了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！

    基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而又大又漂亮的按钮就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。

    Delivery Status Touch (iTunes Link)
    看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。

    delivery_status

    Be Happy Now (iTunes Link)
    Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达“be happy”的主旨。

    beHappyNow

    Next Read (iTunes link)
    Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。

    nextRead

    Nike (iTunes link)
    Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。

    nike

    Borange (iTunes link)
    Borange是一款“社交情况”的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。

    borange

    5. 分层的界面

    一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：

    1. 减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）
    2. 为用户获取信息提供了快速通道
    3. 有更多屏幕空间承载有用信息

    Tweetie (iTunes Link)
    Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！

    tweetie

    Barnes & Noble (iTunes link)
    Barnes & Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。

    barnesandnoble

    USA Today (iTunes link)
    USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。

    usaToday1

    myPantone (iTunes link)
    我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。

    pantone

    6. 在列表中使用图标

    在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。

    iStudiez (iTunes Link)
    这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。

    istudiesz

    Top Floor (iTunes Link)
    Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。

    topFloor

    New York Times
    应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。

    wallStJournal

    Filemaker(iTunes link)
    另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。

    filemaker

    7. 插图的使用

    依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个“有创意”界面的产品前一定要进行可用性测试。

    Magnetic Personalities (iTunes link)
    这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。

    magneticPersonalities

    SugarSync (iTunes link)
    这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。

    sugarsync

    Mom Maps (iTunes link)
    另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。

    momMaps

    8. 使用手势

    经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。

    Mover (iTunes link)
    Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。

    mover

    ABC Animals (iTunes link)
    这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。

    abcanimals

    All Recipes (iTunes link)
    此应用可以让你通过手势来混合众多元素，作为你的美餐。

    allRecipies

    相关文章

    1. 开发iPhone版校友录
    2. 网页设计趋势发展历程之2009下
    3. 网页设计趋势发展历程之2009上

    ]]>     http://blog.b3inside.com/design/iphone-app-design-trends/feed/ 8     开发iPhone版校友录 http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/ http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/#comments Fri, 28 Aug 2009 10:59:52 +0000 波希米亚 http://blog.b3inside.com/?p=796
  • iPhone应用设计趋势
  • WordPress重定向漏洞
  • 网页设计趋势发展历程之2009下
    • ]]>     这几天忙个合作，开发iPhone版校友录。用了很久的iPhone，为它量身定制一套页面还是头一次，好在限制不是很多，会写html基本呈现就不成问题了，外加注意一些特殊处理方法，一个iPhone版网页就搞定了。

    写在前面的话：

    1. iPhone屏幕分辨率是320×480（160dpi）
    2. 虽然都是safari，但只是名字一样，Mac或PC上的safari不能代替全部测试；
    3. <a>标签不用描述hover，点下去就跳转了，想想也知道没法悬停；

    项目的一期需求都完成了，总结了几个iPhone定制点，数量不多，也很容易：

    1. doctype的设定：
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      在做发布页面的时候发现一个奇怪的问题，textarea输入框最右边被浏览器吃掉一块显示不全。
    2. 屏幕自适应宽度问题：
      <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
      分别指的是：宽度320px；默认比例1.0；最大放大比例1.0；不允许用户放大；
      可按自己需要增加配置。
    3. 添加到主屏幕的favcion：
      <link href="/apple-touch-icon.png" rel="apple-touch-icon">
      这个是出彩的地方，可以在主屏幕上显示一个图标，相当于桌面快捷方式。
    4. 字体大小
      默认字体建议14px，特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点，建议18px或16px，不然比输入法文字还小，看起来很不爽。
    5. 跳过头部到页面某个位置
      可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区，特别在“头大”的时候。手机屏幕上寸土寸金哪~
    6. 访问www自动跳转到iPhone站
      Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
      PHP实现方法：
      if(strstr($_SERVER[HTTP_USER_AGENT],"iPhone")){
      header("location:/iphone/");
      die();
      }      JS实现方法：
      <script language="javascript">
      <!--
      //2007-11-24 hqlulu for iphone
      var userAgent=navigator.userAgent;
      if(userAgent.indexOf("iPhone")>0)
      window.location="/iphone/";
      //-->
      </script>
      参考阿权的实现方法

    另外，Mac用户可以使用iPhone Dev Center里iPhone SDK中的DashCode制作Web App，而且含有不少iPhone特效的JS脚本，比如侧滑屏效果等。

    相关文章

    1. iPhone应用设计趋势
    2. WordPress重定向漏洞
    3. 网页设计趋势发展历程之2009下

    ]]>     http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/feed/ 9     解决iPhone不能收发短信问题 http://blog.b3inside.com/apple/solve-iphone-sms-problem/ http://blog.b3inside.com/apple/solve-iphone-sms-problem/#comments Thu, 12 Feb 2009 16:17:24 +0000 波希米亚 http://blog.b3inside.com/?p=355
  • 解决iPhone来电和短信无法显示联系人名字的问题
  • 开发iPhone版校友录
  • iPhone应用设计趋势
    • ]]>     记录一个小问题的解决方法.我的iPhone(2.2)突然不能收发短信了,很奇怪前几天还好好的.
    回想了一下,可能是由于前几天升级了biteSMS 3.0 如果你原来的2.7用的好好的,建议别升级,新功能没加,反倒多了一个license的确认,需要联网.我装上以后险些把iPhone弄成白苹果,开不开机.好在只是开机慢,起来后我就把biteSMS卸载了…

    对,估计就是这个导致的.我找了很多办法,比如:

    1. 把sim卡拿出来放到普通手机里,设置好短消息中心号码再装回来 — 失败
    2. 开启飞行模式,然后关机重启 — 失败
    3. 在iPhone上设置短消息中心号码,*5005*7672*本地短消息中心号码# (如北京:*5005*7672*+8613800100500#,点呼叫) — 失败

    其实根本原因并不是因为”短消息中心号码”出了问题,而是sms文件被修改了权限,搞清楚症结所在,接下来对症下药就行了,很简单:

    1. 用iPhone PC Suite的文件管理功能,进入/private/var/mobile/Library/SMS
    2. 下面应该有且只有一个.db文件(它是用来储存短信的),有没有重要短信都不用想了,删除它.别担心,iPhone会自动生成一个新文件的
    3. 关机重启,好了,再发条短信试试吧,应该可以了吧!

    这个着实让人头疼的小问题终于解决了,短信可以正常收发了,我也可以安心睡觉了.

    相关文章

    1. 解决iPhone来电和短信无法显示联系人名字的问题
    2. 开发iPhone版校友录
    3. iPhone应用设计趋势

    ]]>     http://blog.b3inside.com/apple/solve-iphone-sms-problem/feed/ 8     解决iPhone来电和短信无法显示联系人名字的问题 http://blog.b3inside.com/apple/iphone-callerid-fix-for-unsupported-countries/ http://blog.b3inside.com/apple/iphone-callerid-fix-for-unsupported-countries/#comments Thu, 23 Oct 2008 13:17:19 +0000 波希米亚 http://www.b3inside.com/?p=21
  • 解决iPhone不能收发短信问题
  • 给Notepad++换主题
  • 解决Mac下压缩出现乱码问题
    • ]]>     本人的是iPhone 3G，系统版本2.0.1

    背景：
    通过iTunes（或者iPhone PC Suite）把通讯录从outlook里死气掰咧地导过来，哗啦一下，iPhone里就多了好多人。

    病症：
    一开始：接电话正常，但收短信的时候只显示电话号，对应不了联系人的名字；
    然后来：我把所有手机号前面批量加了“+86”，收短信正常了，但来电话又只显示电话号了

    想……这个咋办呢
    难道每个人存两个手机号码，一个有”+86″的，一个没有的？太扯了！
    经过一顿海搜以后，（期间过程全略掉，不描述都是啥了），最终找到了一个比较靠谱的方法，就是下面的方法。

    先解释一下原理：
    使用卡贴破解的iPhone，会被伪装一个代码001代替中国地区的代码86，所以我们要做的就是手动还原真确的代码。

    具体步骤如下：
    1. 不管用什么办法，找到这个
    /System/Library/Frameworks/UIKit.framework/PhoneFormats/UIMobileCountryCodes.plist
    2. 编辑这个文件，在里面加两行代码
    <key>001</key>
    <string>cn</string>
    3. 重启iPhone，给自己打个电话，发个短信试试吧。

    P.S. 如果是2.1系统,遇到问题,查看该帖第50楼,点击查看

    相关文章

    1. 解决iPhone不能收发短信问题
    2. 给Notepad++换主题
    3. 解决Mac下压缩出现乱码问题

    ]]>     http://blog.b3inside.com/apple/iphone-callerid-fix-for-unsupported-countries/feed/ 2