iPhone网页设计欣赏与最佳实践 Showcase of Designs Optimized for iPhone

March 10, 2010 by SLJ | Category:Design, iPhone/Android | No Comment 3,068

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

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

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

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

1. 新闻/娱乐类

Sevnth Sin

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

Img 0181 in Showcase of Designs Optimized for iPhone Img 0182 in Showcase of Designs Optimized for iPhone

Blip.tv

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

More »

用Photoshop创建一个iPhone程序销售页面

October 26, 2009 by SLJ | Category:Design, iPhone/Android | 2 Comments 1,804

最终图像预览

点击下图查看大图

final
转载自:  http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-promotional-iphone-app-site-in-photoshop/
想看这个作品是如何被构思的吗?请看关联资源:http://vector.tutsplus.com/tutorials/web-design/build-a-promotional-iphone-app-website-wireframe-in-fireworks/

Step 1 – Document Setup 第一步:文档设置:

More »

关于网页设计的一些好收藏

October 10, 2009 by SLJ | Category:Design, HTML/CSS | No Comment 1,542

今天在 Six Revisions 上看到了作者又更新了本次的Favorites,这一次更新我觉得与我关系特别密切,因为有很多东西都是近期所研究,有的也在奇亚上发布过了。所以本文转载翻译并作收藏。

Favorites from the Feeds is a Six Revisions series that highlights notable design and development articles, tutorials, tools, and downloadable resources from my RSS feeds. In this installment, you’ll see some of my favorite Photoshop tutorials from last week, a great article on Opera’s site on grid design, and the other stuff you normally see on FFF.

More »

[译]Facebook是如何设计的

October 6, 2009 by SLJ | Category:Web Structure | No Comment 5,228

最近,Facebook设计团队在其位于加州帕罗奥多市(Palo Alto)的总部,提到了他们为2.5亿用户设计的原理和方法。 他们特别强调了编写代码的重要性、较早并经常分享设计、从开始到结束都参与到一个项目中、以及不要爱上你的作品等,并多次提到要确保设计师有足够的技术来写代码。

 

  • Facebook设计团队致力于产品设计、市场、UI模式、品牌以及前端开发。团队由15名产品设计是、5个UI工程师、5个用户体验设计师、4个交互设计师、以及一个1个内容策划。在这家1000人的公司中,共有25位设计师。
  • 通过写前端代码将设计融入到公司的工程文化中去。
  • 一个团队是如何为2.5亿用户设计的?4个前提:贯穿始终、早分享勤分享、自己动手、不爱上自己的设计。

1) 设计师需要从开始就参与进来:从策划到发布。这与其它公司不同。

  • Facebook 花费很多时间以确保设计师能够自始至终参与到项目中。
  • 比如:新版首页在3月份发布。需求简化和提高网站中信息传输方式的效率。同时涉及数据结构和视觉结构。
  • 确定视觉效果后,开始写代码制作原型。边编码边设计允许你看到布局内的真实数据是如何工作的。
  • 平衡权重——在主页设计中做一系列的探索,包括不断的在交互和视觉细节上。
  • 让不同的团队在一起——使用了一个静态的模型以传达设计。通常并不提倡静态设计。
  • 拥有一个能写代码的设计师能够了解细节并快速执行。

More »

22个Photoshop网页设计教程网站推荐

October 3, 2009 by SLJ | Category:Design | 3 Comments 1,877

photoshop-网页设计-教程

今天向大家推荐一些非常棒的网页设计类教程网站,这些网站都会经常更新一些优秀且高质量的Web界面设计教程。如果你热爱网页设计并且经常搜集各种界面设计教程,那么你一定要把下面这些网站收藏起来。

 

More »

↑ Top