Archive for 三月, 2011

客户端交互设计适配之——屏幕大小

Posted by 清风 On 三月 - 9 - 2011

随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移。然而手机与PC 不一样,PC经过了多年的发展,在设计上形成了很多不成文的规则,如网页的宽度都在960px左右【当然,由于整体的电脑屏幕往大尺寸及高分辨发展,除了背景宽屏自适应外,不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多,手机屏幕的大小、比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小上的适配,又要保持其一致性,同时还要提高每个手机屏幕的使用效率,这就存在着很多的矛盾点。 在客户端的设计过程中,针对不同的屏幕大小,应该如何来设计?是否每个大小的屏幕尺寸都需要一个新的界面布局,还是所有的屏幕尺寸都使用相同的界面布局?我们将在下面的内容中来探讨这些内容。 一、当前热门手机的屏幕大小 下图中,我抽取了国内某个网络电器城某周的10大畅销手机排名: 虽然只是2010年中的某一周的手机销售量排名,由此可以看出,当前使用中的手机屏幕差异很大,各种屏幕大小和分辨率都有。如果为了适配更多的用户群体,则需要考虑的手机屏幕大小和分辨率更多。【不过,根据当前的手机发展趋势,及手机客户端的使用行为可以看出,最主要需要用户关注的手机屏幕是2.4吋以上,240*320以上的手机屏幕,因为这样的手机使用客户端的频率和用户量都会更多。个人建议更多地是考虑320*480及以上的屏幕。】

手机客户端交互适配设计之我见

Posted by 清风 On 三月 - 9 - 2011

简摘:本文从手机平台、机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则。 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂。在设计单款、单系列手机时,需要考虑这款手机的软、硬件优势及不足,考虑其特性、其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了。说起来,这至多是考虑某个系统、某个屏幕的特性而已,而不同功能的所有设计基础都是一致的。 但是对于客户端,咋一看,好像很简单,就是设计一个应用。实则不然,客户端重在适配,客户端不仅仅会用在一个型号的手机中。这样问题随之而来,如何能适配不同的手机呢,手机千变万化,我总不能只针对一款手机,一个平台吧?当然也有些客户端确实是这样的,只能使用Windows Mobile、Symbian、iOS、Android、Java(非系统)等的某个平台。但是即使对同一个平台,问题还是很多,是要在触摸屏中来用,还是在键盘机中使用?是在大屏幕中,还是小屏幕中等等。 如何处理???有待大家讨论,这里只是抛砖引玉… 客户端在不同的平台中,界面展示和特性各不相同 所以,本文中,我想简单的总结一下手机客户端的交互适配方法,希望能更好地来指导当前移动应用的设计需求。

手机交互那点事儿(1)—Wap设计基础

Posted by 清风 On 三月 - 9 - 2011

引言:这个系列的文章将以笔者这两年在手机交互方面的工作经历为基础,阐述Wap Site、Native App、Web App的交互设计,将包括以下内容: 手机交互设计基础知识(5%) 设备特性在设计上的应用(5%) 部分交互控件的详解(50%) 部分不涉及商业机密的项目经验(35%) 答读者问(5%) 其中“设备特性在设计上的应用”将以穿插的形式出现在文章中,暂时不会独立成单独的章节。 WAP站点,这似乎是一个有点落伍的东西。在诞生之初,它很简陋,只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今,绝大部分WAP站点都开始使用xhtml标记语言,不过在iOS、Android风潮席卷全球的今天,这个演进似乎显得有点苍白无力。但在中国,WAP的用户群体依然是移动设备上网的绝对主力军。那么,到底该如何设计一个WAP站点呢?个人以为,需要从设备、浏览器、任务、场景四个方面入手。一个WAP站点好与坏,不取决于页面的绚丽程度,不取决于功能是否强大,而是取决于站点的兼容性。

手机网站开发原则

Posted by 清风 On 三月 - 9 - 2011

从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子,感慨良多。 手机网站开发,有着许多不为人知的困难: 一是可参考的资料太少,大部分手机网站都处于起步阶段,很多的时候都是摸着石头过河,而鉴于淘宝自身的特殊性,也使得我们在参考成功案例之余,要做更多的思考; 二是兼容性工作异常艰辛,难度一点也不比web网站的兼容性工作来的低(关于这点,请参见我之前的文章);

WAP页面设计与实现小贴士

Posted by 清风 On 三月 - 9 - 2011

目前绝大多数手机都支持WAP 2.0。WAP 2.0的页面设计具有更好的视觉效果,更接近网页。不过由于手机千差万别,手机浏览器的能力也各不相同,直接照搬网页的设计与实现,很可能让你的WAP页面出现问题。以下小贴士来自于我们的页面设计与开发实践。 1、当你试图使用背景图时,请同时搭配近似的背景色 手机上,有些浏览器是不支持使用背景图片的。比如下图,在S60v3操作系统的手机(如N76)上:

  • RSS
  • Delicious
  • Digg

分享30个优秀的iPad界面设

毫无疑问,苹果iPad看起来是美丽和迷人的,iPad的多点触摸和其他现代技术都是让用户真正感受到舒服的设计。在这篇文章中,我们收集了30个优秀的iPa...

开发apple的app需要事先注意

如果发包者认为某个事情“简单”,通常您需要谨慎了,因为收不到钱或者收到很少钱的可能性很大。即便是一个里面只要求嵌入一个固定网址,打开...

Adobe Flash CS5 无法定位程序

我是64位windows7 系统 打开FLASH CS5 后提示 无法定位程序输入点 ?ik_treeIsActive@CFLASHIK@@QAE_NJ@Z 于动态链接库 FlashIK.dll 上 我反复重新安装了N次Flash发现 这...

安装Office 2010后出现正在配

OFFICE 2010 MSDN版出来后,下载安装 ,启动后发现每次打开都会出现“正在配置”的进度,删除重装亦不成功,对SETUP.EXE改名也不行,最后找到这个方法...

几个表格和列表方面的css

首先表格除了常用的tr、td标签外,还有th和caption标签,前者是用来显示列名称,后者用来显示表格标题。这2个标签的增加,可以更方便的对表格css进...