译言网 | iPhone网页设计欣赏与最佳实践.

近些年来,手机已经成为越来越流行的上网设备。iPhone的出现,使移动Web程序越来越多姿多彩,针对移动设备的网页设计,也渐渐开始成为一个重要的网页设计分支。这篇文章里,我们一起欣赏优秀的手机网页设计,其中绝大部分是针对iPhone的。

虽然iPhone的Safari浏览器已经和桌面浏览器一样强大,可以解析任何网页,但它的可视面积小的多,操作方式也有其特殊性。面对来自 iPhone 可能达数百万计的流量,设计师和程序员们开始重视这一挑战 —— 他们必须在iPhone屏幕的最大范围内,使用最少的带宽,显示最漂亮的网页。

iPhone的浏览体验与普通桌面浏览器的完全不同。按钮和链接必须足够大,因为我们的手指不可能像鼠标指针一般精确。当然,制作适于iPhone的界面并不是像造火箭那么复杂的任务,我们使用相同的HTML、CSS和Javascript,而改变的仅仅是屏幕的尺寸。

在下面的展示里,我们挑选了一些有趣的、高互动性并且精致漂亮的iPhone网页设计,我们还介绍了一些方便的开发工具,来帮助你更高效的设计iPhone网页界面。

1. 新闻/娱乐类

Sevnth Sin

独特的导航菜单为这个网站增添了非凡的吸引力,绝佳的理念和设计。

Screenshot Screenshot

Blip.tv

清新简介的版式和配色,非常契合网站的定位。

Screenshot Screenshot

NBC

you-tube风格的设计非常便于查找和定位。

Screenshot Screenshot

Zinio

杂志架,所有操作一键搞定。

Screenshot Screenshot

Spin The Bottle

一个简单的转瓶子游戏,非常好的图像应用。

Screenshot Screenshot

Daily Wallpaper

大缩略图设计,非常方便

Screenshot Screenshot

AOL Horoscopes

配色方案很完善的星座网站

Screenshot Screenshot

Yahoo Omg!

非常鲜亮的配色和版式,给人以冲击力和吸引力

Screenshot Screenshot

2. 商业/企业

DPTO

个性的红色界面和新颖的3D导航,增添了无限魅力

Screenshot Screenshot

Mind Medium Creative

特殊的光泽设计,非常有质感

Screenshot Screenshot

Redhawk Investment Advisors

非常有商业气息,不错的色彩应用

Screenshot Screenshot

Nike Lab

充分体现动感和活力的Nike网站

Screenshot Screenshot

Procab Studio

信息比较丰富,但空隙太大了些

Screenshot Screenshot

Hotel Monterilla

非常舒适的设计,让人不禁像进去睡个觉。

Screenshot Screenshot

Viget Labs

蓝色的背景、恰到好处的空隙和圆角,让这个网页非常舒适和引人注目

Screenshot Screenshot

Batali Associates

不常见的布局版式,非常适合iPhone

Screenshot Screenshot

Ready For iPhone

一个专门提供iPhone网站解决方案的公司,“go”上的手型图标让人忍不住就去点点。

Screenshot Screenshot

Element Fusion

另一个提供解决方案的公司

Screenshot Screenshot

Volkswagon

车型相册,导航非常人性化

ScreenshotScreenshot

3. 购物/电子商务

Torn Robes

简洁漂亮的手机购物站点,购物流程非常舒适

ScreenshotScreenshot

Coosh

独立产品的宣传网站,非常漂亮

Screenshot Screenshot

Walmart

非常容易找到想要的商品,并且可以生成自己的商品订单列表

Screenshot Screenshot

4. 个人展示/博客

World Ending Blog (Japanese)

比较好的阅读体验

Screenshot Screenshot

Signal Element

只有三个页面的网站,但是设计感非常强

Screenshot Screenshot

One Crimson Splash

配色与构图非常完美

Screenshot Screenshot

5. 教育/资讯

MIT

简约,简洁,便于使用

Screenshot Screenshot

101 Cook Books

虽然没有复杂的设计,但内容整齐,便于阅读

Screenshot Screenshot

Please Fix The iPhone

Screenshot Screenshot

1881

电话黄页站点,非常清晰易读。

Screenshot Screenshot

AOL Food

爱厨人士必备

Screenshot Screenshot

Deviant Art

艺术展示站点,配色非常富于文化气息,且清晰易读

Screenshot Screenshot

最后的不一定是最重要的,送给大家一句格言:

He who laughs at himself never runs out of things to laugh at. (大意可能是:学会取笑自己的无知,你就永不缺可以笑的题材。 )

Screenshot

iPhone网页设计工具

下面一些工具可以帮助你把网页快速“iPhone化”。

  • iPhoney
    iPhoney是一个基于Safari的iPhone网页测试环境,可以用来测试开发iPhone网站。这是个非常好的工具,你可以看到网页在iPhone上呈现的样子。
  • Test iPhone
    基于web浏览器的模拟器,可以快速测试你的iPhone网页
  • iWebKit (Demo)
    iWebKit 是一个文件包,用来帮你建立适用于iPhone和iPod touch的网页和应用程序。里边包含了一些可用的模板。
  • iUI
    iUI 是个包含Javascript、CSS和图片的前端框架,为你准备好了iPhone网页的一些标准样式和特效。
  • Intersquash (Demo)
    这不是个设计工具,它可以帮助你建立适用于iPohne的RSS Feed。
  • WPtouch
    Wordpress的iPhone化模板
  • Jaipho Gallery (Demo)
    如果你的网站有相册,那这个工具可以提供针对iPhone的优化。

更多内容

下面的内容可以帮你进一步学习iPhone网站开发与设计。

关于作者

作者:Adeel Raza

原文:Showcase of Designs Optimized for iPhone

翻译:Oncoding编码营

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注