Bob SpAce

Be myself!Do myself!

Category: UI Design

10 Resources For Modern/Metro UI Web Design

 

Metro UI or Modern UI are latest microsoft interface design interface term, it applied in windows 8 and windwos phone ui, with big and colorful square box minimalist icon theme. This term are influencing some of web design trend too, you can see some of sites adapting metro ui style, and these post have some resources for web designers to creating metro style ui in web design, for component (buttons, menus, navigation, fonts, icons, etc).

Javascript & CSS

1. Metro Bootstrap ( link )

 

2. Metro UI CSS ( link )

 

3. Metro UI Template ( link )

 

4. Code 52 Metro CSS ( link )

 

5. BootMetro ( link )

 

6. MetroJS ( link )

 

7. JQuit Builder ( link )

 

Icons

8. Modern UI Icons ( link )

 

9. Metro Style Icons ( link )

 

10. Metro UI Dock-Icon Set ( link )

 

10.1. Metro UI Icon Set UPDATE ( link )

30款手机用户属性及图集设计案例

The usage of mobile device user continue to rise, means that more user are going to access the internet anywhere. If you have a consulting or freelancing service, it might be good to bring your information right on the user hand. Here are some screen captured from the android emulator of the web profile & portfolio optimized for mobile devices.

Erskine Design

Erskine Design


Media Burst

Burst Media


Denon Graphic

Denon Graphic


Design Quest

Design Quest


Deck Fifty

Deck Fifty


GDO Creative

GDO Creative


Reblis

Reblis


Aztek Web

Aztek Web


Nclud

Nclud


Marcel Muller

Marcel Muller


Digiti

Digiti


Viget Labs

Viget Labs


Just Creative Design

Just Creative Design


Dave Harper Design

Dave Harper Design


Marco Santonocito

Marco Santonocito


Analogue Web

Analogue Web


Zipline Interactive

zipline interactive


Mikael Geljic

Mikael Geljic


Jonathan Snook

Jonathan Snook


Amy Stoddard

Amy Stoddard


MOS Creative

MOS Creative


McGarry Bowen

McGarry Bowen


Auxiliary Design

Auxiliary Design


Creative Edge

Creative Edge


Dan Tamas

Dan tamas


Urutti Meoli

Urutti Meoli


Moire Marketing

Moire Marketing


Creative Carlos

Creative Carlos


Formas Do Possivel

Formas Do Possivel


Made By Mode

Made by Mode

30多种用户体验手机应用设计欣赏

Mobile application has becoming one of the promising business, more and more company slowly create their own mobile app or the mobile web version, and this is our chance as a developer or designer to join in the mobile application crowd. Here I share some example for mobile application user interface design, to give you some inspiration for creating unique mobile user interface design.

Facebook iPhone App by脗聽hamzahamo

Facebook iPhone App by hamzahamo on deviantartNRG Player by脗聽slaveoffear

nrg player for android by slaveoffear on deviantart

Alice by脗聽kingkongcn

alice alice alice by kingkongcn on deviantart

Scored Cribbage by脗聽mattwatier

scored cribbage by mattwatier on deviantart

Sleep Tracker by脗聽aaronu

Sleep Tracker by aaronu on deviantart

Autoplus by脗聽jfdc

Autoplus

Rome For UCWEB by脗聽echo615

Rome For UCWEB by echo615 on deviantart

Trivia App by脗聽shod4n

Trivia App by shod4n on deviantart

Real Estate iPhone App by脗聽3cloudz

Real Estate by 3cloudz on deviantart

Dunya News by脗聽aliather

Dunya News by aliather on deviantart

Kop Tillsammans by脗聽areeb89

Kop Tillsammans by areeb89 on deviantart

Thumbplay Music by脗聽doitjeffstyle

Thumbplay Music by doitjeffstyle on deviantart

Job Efficiency Calculator by脗聽aaronu

Job Efficiency Calculator by arronu on deviantart

Train Status Sweden by脗聽syrligt

Train Status Sweden by syrligt on deviantart

Game Catalogue App by脗聽jhousedesign

Game Catalogue App by jhousedesign on deviantart

Package Tracker by脗聽kahil

Package Tracker by kahil on deviantart

Gowalla Stampr by脗聽redeemingdesign

Gowalla Stampr by redeemingdesign on deviantart

Handmade App by脗聽shod4n

Handmade App by shod4n on deviantart

Soundcloud App by脗聽tmqztw

Soundcloud by tmqztw on deviantart

Sweety Bird by脗聽foolish-fox

Sweetybird by foolish-fox on deviantart

Fishing Calendar by脗聽jurev

Fishing Calendar by jurev on deviantart

iScroll by脗聽hamzahamo

iScroll by hamzahamo on deviantart

ITGO Interval Traine by脗聽krigh

ITGO Interval Traine by krigh on deviantart

Pet Picker by incubotic421

Pet Picker by incubotic421 on deviantart

Hypem App by脗聽fbed

Hypem by fbed on deviantart

Consume Within by脗聽crezo

Consume Within by crezo on deviantart

Hunting Calendar by脗聽jurev

Hunting Calendar by jurev on deviantart

iCaption by脗聽krigh

iCaption by krigh on deviantart

Batak Online by脗聽kungfuat

Batak Online by kungfuat on deviantart

Number Jogging by脗聽color2life

Number Jogging by color2life

Tear Me by脗聽badaworld-fr

Tear Me nu badaworld-fr on deviantart

Turkey 2010 FIBA by脗聽kungfuat

Turkey 2010 FIBA by kungfuat on deviantart

2012年Web设计和开发的15个趋势

Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势。

2012看来注定是有趣的一年。经济的下滑继续广泛地打击行业,看不到结束的尽头。政府极力审查网络,否认公民的基本权利,支撑摇摇欲坠的媒体公司。

对网页设计和开发,2012还是比较混乱的一年。我们处于很多小矛盾当中:移动贪婪地占领市场份额;原生App威胁开放的互联网;收费墙阻碍曾经免费的信息;合作与分裂的冲突;复古(Skeuomorphism)的交互模式挑战创新的设计模式。

我们很难预测将来会发生什么,但是一些设计师、开发工程师和行业的大师提出了自己的观点。以下是他们对2012年的一些猜测,关注这些方面,你更可能取得成功。

1. 渐进增强(Progressive Enhancement)

Happy Cog的创始人 Jeffrey Zeldman说过,移动Web的暴增以及Webkit智能机超越传统桌面的Web浏览,让大家甚至是顽固的怀疑论者采用渐进增强、HTML5、CSS3 以及基于Web标准的其它方面的设计。他还提到,IE对Web标准的支持越来越好,更加说明了大家迫不及待拥抱新的世界。

2. 响应式设计(Responsive Design)

另外,Zeldman认为,我们在经历着“被Web标准的折磨”,但是在硬件领域,现在有非常多的设备,有着不同的性能——要给它们分别开发一套界面再麻烦不过了。因为这点,他期望响应式设计在2012年发挥大作用,架起不同平台之间的桥梁。

Clearleft 创始人 Andy Budd 猜想这可能是激进出版商利用iPad夺取Apple公司收费墙的一种方式,并且预测到2012年底,响应式网站的涓涓细流将会变成潺潺大河。“这就好像Web标准又开始行动了。”但是Flat Frog Design的 用户体验战略家Erin Jo Richey认为这并不会一帆风顺。“网站会缩放大小,仅凭这点并不意味着在桌面和移动平台的所有的信息价值是一样的。用户交互的信息需要灵活地调整,就 如网站大小一样。”她说,因此会有更多的项目和客户关注到屏幕大小并需要适合的策略,使得内容在不同分辨率的设备能正常展示。

 

Responsive design, as per the website of Elliot Jay Stocks, will be commonplace by the end of 2012

 

Elliot Jay Stocks网站在不同设备的展现。2012年,响应式设计将会变得更加普遍。

3. Flash将幸存

很多用Flash设计的网站被认为会停留在2011年,然而设计师Tom Muller预 测,Adobe的技术在2012将会一直活者,不会毁灭。“很多人支持不用Flash设计网站而是使用Web标准,并且也渐渐地不太使用Flash网站。 但是,我相信Flash还会存在一段时间。”Muller解释到,在2011年期间,他参与了三个大项目,都是基于Flash的,因为Flash是创建交 互视频、动画和3D的最好工具。

”设计师和开发工程师有时候目光不够长远,他们不了解哪些才是最关键的被大多数人需要的,因为他们更喜欢所幻想的酷的东西。”他说,“越来越多的大 网站从Flash切换到HTML5和CSS3”,但是对于娱乐网站,Flash是并将一直是创造完美体验的最佳选择。因为这些网站就像是电影世界的扩展, 而不仅仅是枯燥的文本信息。在游戏行业,Dull Dude Games的创始人Iain Lobb预测,2012年,Flash会光荣地回归,客户会尝试使用HTML5是因为那是焦点所在,但是,我认为正确的事是把他们带回到Flash的时代。

 

Sites like Threaded show there's still a place for Flash on the web

 

Threaded Show 类的网站Flash存在的原因之一。

4. 原生支持更强

即使Flash在2012年长盛不衰,但是,浏览器原生的特性和功能将会继续,Opera的宣讲者Bruce Lawson说到,“随着对HTML5的支持增强,并且有更多的浏览器和平台,我们会看到原生支持的更大压力,它要支持一些以往通过插件来支持的特性:摄像头、麦克风等通过使用HTML5的getUserMedia,还有其他更多的东西,例如对适应性的流媒体的支持。”

 

2012 will find more browser-native features that once would have required plug-ins, such as Sean Christmann's video demos

更多的浏览器原生特性能够支持以往只能通过插件设置的特性,如Sean Christmann的demo

5. 应用程序开始稳定

自称精通代码和cookies的Remy Sharp,称2012年浏览器和平台更加的紧密,“我期望看到更多的高质高性能的网页游戏,从中你辨别不出来究竟是否是原生的。”他还认为更多的网站会运行在文件或者操作系统的其它方面。

从视觉的角度看,Muller认为这个趋势会使得设计师根据平板电脑和屏幕交互来设计,形成在鼠标与触屏之间的混合设计。他同时指出,2012年重纹理的设计将开始出现,在一定程度上Apple设备表示极力赞成。但是设计师Roger Black认为在一个由内容统治的世界,设计师和编辑将“要减轻这个繁荣,把他们所知道的转化成别的东西”。他建议:“不要用平板的新闻和移动杂志网站为例,而是要想想数字出版。”

在技术方面,社区软件顾问Suw Charman-Anderson预 测,App的便利扩大了消费者数量,但是对开发工程师而言,却是比较头痛的,因为开发工程师创建的App需要兼容各种不同的平台,需要应对不同的商店政 策。跨过原生与Web App的较量,她认为2012年会带来原生/HTML5混合模式App的广泛应用,你可以通过一个源头就能为不同平台的App添加内容。她举例Pugpig.com网站,“他们用HTML5结合iOS和Android,创造更好的用户体验。这只是时间问题,这个策略是小商家适应不同平台的唯一的方法。”

 

Apple's irritating penchant for skeuomorphic design will continue to influence designers, thinks Muller

Muller认为,Apple公司对复古设计的执着将继续影响设计界。

6. Web App的分裂(fragmentation)

大家可能认为2012年Web App会持续增长,但是Lawson担心2012年会是Web App分裂的一年。浏览器供应商之前的合作会促进HTML5规范的推进,但是并没有促成Web其它层级的规范。不幸的是,我们看到很多Chrome专有的 App,“不要在这里搞发明”的极端的例子已经有10个——是的,10个—— 不同的 App格式,是由提供商发明的,而不是多方协同的。这个打击了开发工程师,更糟的是,伤害了用户。

Mozilla 的技术专家Rob Hawkes保持乐观的态度, Boot to Gecko,Mozilla的操作系统可以促成Web App的增长,并且减少单一浏览器提供商的App开发。Boot to Gecko项目主要关注移动领域,它会实现很多的Web接口,来访问移动硬件的特性。

 

Still in its early stages (the grab shows a UI mock-up idea from the Wiki), Boot to Gecko could aid in the fight against web-app fragmentation
虽在早期阶段,Boot to Gecko可能会减缓Web App的分裂。 (该图片是从Wiki取得的。)

7. 移动越来越重要

提到移动,很容易想到移动流量和使用量的持续的增长。基于移动的App将会取得绝大优势,我们会看到移动MVC框架的增长,如37signals,Treehouse创始人 Ryan Carson说。

在市场份额方面,移动平台专家Peter-Paul Koch认 为2012年移动Web将增加百分之十。客户将提出做移动网站的需求,所以桌面设计师和开发工程师要做好失去客户的准备,他警告。Koch认为创建移动网 站会同时带来几个好处:不再有Flash,鼠标效果和基于像素的渲染。所以要关注的是响应式设计、设备API,还有要了解哪些特性是移动设备最需要的,并 更加意识到网站需要适应不同设备。

Mobile growth will increase the number of mobile-optimised sites in 2012

2012移动的增长从而导致移动优化网站的增长

8. 设备暴增

淡定!设计师Aaron Gustafson认 为移动设备的增长将会带来很大的挑战,即是,设计师和开发工程师要面对更小的平板——想像一下Nook Tablet 和Kindle Fire而不是iPad——因为低价的平板占领更大的市场。Lobb认为这会导致更多的开发工程师需要拥有数个不同的设备来检查网站的兼容性。

Designers will have to embrace smaller tablet form-factors in 2012

设计师需要面对更小的平板

9. 不仅仅是视觉

设计师兼插画家Geri Coady提出,我们经常说优秀的设计是无形的,然而很少人意识到网站或App关注的不仅仅是视觉设计,还要兼顾文案设计和交互设计。2012年,设计师和客户会更加意识到网站的外观并不是全部——样式、内容、行为同等重要——这些方面结合起来才能更加强化网站、App和品牌。

该理念来自于“扩展技能”(Carson认为,2012年,不懂前端开发的设计师不是好的设计师)或者说来自于协同合作。Sharp希望看到很多的 开发工程师向设计师学习,这样才能把设计更好地呈现。同样道理,设计师应该多向开发工程师学习,以理解哪些设计是可能实现的,为什么有些东西更难实现。Erik Spiekermann认为,这样更多的设计师能更好地理解代码,而更多的开发工程师能更好地理解设计。

10. 社区应用的竞争持续升温

2012年,社区应用的重要性将会继续,但是各有各的观点。开发工程师 Blaine Cook预 言,facebook会继续扮演重要角色,而小企业像Path、Instagram、Tumblr 、Spotify等,社区交互会达到一个临界点。很多的社区分享网络和App都想从facebook和twitter的大肥肉上取得一点油水,但是最终结 果将会是仅仅把分享功能集成到他们的服务当中。他同时指出,Facebook提供工具来创建网站而不仅仅是网页,来满足人们继续集成到社区媒体和服务,他 对这点表示怀疑。

 

Social will continue to heat up in 2012, and Cook sees more start-ups like Path taking over from giants like Facebook

社区应用的竞争会持续升温,更多的小企业如Path对巨头Facebook的冲击

11. 双屏模式的增长

双屏体验在2012年会更加普遍,Budd预测。电视节目公司更加意识到竞争,除了电脑还有平板和手机等不同的平台,他们开始推动相关的内容到不同 的平台当中。有些2011年的例子,包括“Million Pound Drop”现场直播节目,还有BBC的平板应用“Nature Watch”。很多的小公司都转向双屏体验,包括Shazam的新的电视剧标签功能。所以,好好期待吧!

 

More companies will take advantage of the second screen in 2012

更多的公司将充分利用第二屏

12. 分布式的人力资源(Distributed workforces)

Richey认为,2012年很多公司的创立模式会比较创新。新一代的年轻设计师和开发工程师步入了“不幸”的工作行业,他们要学习很多方面的技 能。随着经济的发展,很多设计师和开发工程师不甘于在狭小的空间里付出他们劳动和自由。随着高质量的科技公司拥抱移动的分布式的人力资源,找寻高端人才的 老板们需要重新审视自己的公司文化。

 

37signals CEO Jason Fried has condemned traditional office culture. Expect more companies to have atypical set-ups in 2012

37signals CEO Jason Fried 审视传统公司文化,期待更多的公司求强图新

13. 更强的客户服务

Headscape的联合创始人Paul Boag认 为2012年将会是Web行业的客户服务年。作为Web设计师,我们以为做好网站就行。但是不仅仅是这点。我们同时提供服务给客户。我们经常很关注用户体 验、代码和设计,但是我们忽略了其它重要的东西,包括更好的沟通、理解商业需求、超越客户的期望。如果我们要在2012取得成功,我们需要取得客户的认 可,而仅仅是满足用户的需要。

14. 更加专业

Budd认为,整个行业正逐步地走向专业化,这意味着设计师和开发工程师需要更加努力,否则他们就变成廉价劳动力了。2012年,设计师需要更多的 策略和方法,不要再向Web标准妥协和做差劲的项目,不再偷工减料而是要努力去传递客户所期望的价值。Spiekermann同时认为,更多的客户期待更 专业的设计师,更完美的网站,更敏捷的流程。

15. 突破界限

最后一点,Edge of my Seat 的创始人 Rachel Andrew 认为2012年将会是技术和技能革新比较迅速的一年。整个2011年,我们看到浏览器对HTML5和CSS3的支持得到很好的改善,我们可以实际应用到工 作当中,所以我们需要学习和应用最新的技术。她说,我们要经常反思,确保不要用一贯的思路去做同样的事情,而是尝试使用新的更好的方法。Andrew相 信,2012年会有更多的设计师推动新技术的发展。放弃无效的方法和旧的方法,用新的最好的实践来实现我们要实现的。

网络自由的抗争

没有任何一个设计趋势像争取自由那样火热。一些开发工程师担心立法者继续妨碍网络自由,在欧洲和美国,最典型的是媒体巨头的授意。Zeldman 说,任何普通人,只要理解网络的基本知识,都会坚决反对SOPA(Stop Online Piracy Act)。可恶的法案,会击毙网络上所有的网站,甚至毁掉
DNS系统。

Tumblr is one of several major websites that's been active in opposing SOPA

Tumblr是积极反抗SOPA的大网站之一

 

Kock希望如果哪个国家制定了这类愚蠢的法案,我们会采取行动,寻找更好的方法来应对,Lawson希望立法者不要用“想想孩子”的争论来做审查 内容的借口。“我是做父母的,我不希望我的孩子在网络看到不适合的内容。监视网络使用是父母的职责,而不应该不是审查对象之一。”另外,2012年我们将 会继续抗议,否则政府会毁掉整个网络继而是整个产业。

引言:这个系列的文章将以笔者这两年在手机交互方面的工作经历为基础,阐述Wap Site、Native App、Web App的交互设计,将包括以下内容:

  1. 手机交互设计基础知识(5%)
  2. 设备特性在设计上的应用(5%)
  3. 部分交互控件的详解(50%)
  4. 部分不涉及商业机密的项目经验(35%)
  5. 答读者问(5%)

其中“设备特性在设计上的应用”将以穿插的形式出现在文章中,暂时不会独立成单独的章节。

WAP站点,这似乎是一个有点落伍的东西。在诞生之初,它很简陋,只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今,绝大 部分WAP站点都开始使用xhtml标记语言,不过在iOS、Android风潮席卷全球的今天,这个演进似乎显得有点苍白无力。但在中国,WAP的用户 群体依然是移动设备上网的绝对主力军。那么,到底该如何设计一个WAP站点呢?个人以为,需要从设备、浏览器、任务、场景四个方面入手。一个WAP站点好与坏,不取决于页面的绚丽程度,不取决于功能是否强大,而是取决于站点的兼容性。

一、用户使用的设备

“用户是通过什么设备访问我们的站点?”这是在搭建一个WAP站点之初,设计师需要考虑的第一个问题。一般来说,我们可以把用户使用的设备粗略的划分为【键盘机】和【触屏机】。

Ⅰ、键盘机:

  • 屏幕物理尺寸小,可视区域小
  • 用户对手机的操作受限于导航键

1. 可视区域小,就决定了用户在当前屏幕内看到的内容非常有限,用户往往是通过扫视第一屏的内容来决定是否继续向下浏览。我们在设计过程中,则需要按信息的重 要度以降序的方式来组织,将最重要的信息在首屏呈现给用户。大部分情况下,logo和导航区块是必不可少的元素。如果你的站点是互动型的,还需要在 header里体现出用户登陆状态和用户名。根据应用场景和任务的不同,少数页面可以省略header。

目前市面上低端机器的屏幕分辨率宽度基本都在176px以上,所以,针对最低端键盘机设计WAP站点时可采用176px的基准宽度来设计,页面高度不限,但最好不要超过7个屏高。同时还需考虑页面文件大小,页面文件大小最好控制在13k以内。

2. 键盘机的第二个特征决定了用户必须遵循既定的规则来移动焦点,例如:方向键、摇杆、滚轮、拨盘(BlackBerry)。正因为如此,我们在设计的时候,必须思考页面链接元素之间的内联关系,仔细计算用户的焦点移动轨迹。重要的信息最好是放在每一行起始位置。

Ⅱ、触屏机:

  • 可视区域较大
  • 操作所需面积大
  • 用户操作行为跳跃

1. 可视区域大,决定了页面承载的信息量也比键盘机要多。现在市场上主流的触屏手机分辨率为320*480,屏幕宽度最低也是240。这时,如果将适配键盘机 的WAP页面放到触屏机上来看,会出现大面积“被留白”的情况,视觉上将带给用户松散的感受。这时我们可以将240px作为基础宽度进行设计。

2. 触屏手机的屏幕大了,是不是我可以放更多的链接了?答案其实是否定的!用户通过手指、触控笔对手机进行操作。触控笔笔尖一般面积都在2*2mm左右,能进 行比较精准的点击。而人的手指头则要大很多,为了确保用户不会出现误操作,我们在设计的时候,需要将链接的字号、行高、间距增大。国外研究某资料给出过参 考值:食指所需最小操作面积为7*7mm、间距1mm;拇指所需最小操作面积为9*9mm、间距2mm。(资料待查阅后将补上原文链接)

有同学会问了,这个面积单位是毫米,如何在设计过程中我们如何换算成像素呢?这个根据每款屏幕的分辨率、dpi、物理尺寸的不同,换算结果都不一样,有关像素、dpi、厘米、英寸之间的换算关系,请学习这篇文章。

3. 众所周知,用户在操作键盘机的时候,在达到目标链接之前,基本都需要进行多次焦点移动的操作。而触屏机则没有这种限制,用户的操作大多不再受物理按键的局 限,更多是受到视觉感官的支配,换句话说就是看哪点到哪。这时需要注意的是,因为失去了“焦点”的提示,我们必须对可点击的链接和不可点击的文字进行明确 的视觉区分。

二、浏览器左右设计

大部分手机自带浏览器和第三方浏览器在操作方式和页面解析上都有着自己的特性。我们在设计之初,需要深入的了解它们各自的特性,这样我们才能对不同的方案进行权衡。本文针对焦点、操作键、HTML&CSS这三大基础因素就浏览器对设计的影响进行一番浅析。

Ⅰ、焦点如何移动

1. UCWeb浏览器

  • 左右键:翻屏
  • 上下键:焦点逐个移动
  • 长按左右键:加速翻屏
  • 长按上下键:加速焦点纵向移动

2. 手机QQ浏览器

  • 左右键:横向移动焦点
  • 上下键:纵向移动焦点
  • 长按左右键:翻屏
  • 长按上下键:加速焦点纵向移动

3. Opera mini浏览器

这哥们是最PC化的手机浏览器。内置伪鼠标一枚,左右键、上下键均为鼠标横向、纵向移动,单次按键大概位移10像素,长按加速。

了解浏览器的焦点移动规则后,一方面有利于我们对某个控件信息进行优化组织,另一方面对于多个设计方案进行取舍的时候也有莫大的帮助。当我们充分考虑焦点移动路径、用户操作频次、某信息块权重等因素后,往往能迅速的找到最适合的设计方案。

小提示:QQ浏览器和UC浏览器默认会给所有的图片赋予焦点,也就是说哪怕页面上某张图片没有链接,但用户操作过程中焦点也会路过这张图片。

Ⅱ、操作键

键盘机的浏览器(自带、第三方)都有左右功能键。左功能键一般为菜单键,右功能键一般为返回、退出键。用户在进行“返回”操作时,基本都会通过右功 能键完成。触屏机虽然没有物理功能键,但绝大部分的浏览器都在屏幕内虚拟了一排功能键。并且UCweb、QQ、Opera等第三方主流浏览器均提供缓存功 能,页面在返回的时候均为秒读。因此,我们不需要频繁的为用户提供“返回上一页”的链接。后续的系列文章中,将有专门的章节对手机导航系统进行探讨。同 时,某些浏览器也提供重定位至页顶、至页尾以及快速翻屏的操作,当我们在处理超长页面时,对于“Top”这样的回顶部锚点的处理也需要慎重。

Ⅲ、HTML & CSS支持度

各大厂商大多都有一套自制内核的浏览器,甚至同一个平台下的不同系列手机浏览器的解析效果也五彩缤纷,再算上市面上的多款不同内核的第三方浏览器, 这真的让人无比头大!因为公司的兼容性研究资料尚未开源,所以这里只能列出一些高危的风险点。有兴趣的朋友可以自己着手研究下,有条件的公司也建议系统的 做一次深入测试。这些资料对于WAP站点的设计有着决定性的影响!

  • font属性:176px的屏宽下,12号字一行可以放14.5个汉字,但实际上部分浏览器会将字体放大至14号,所以安全字数是12个汉字/行,并且大多不支持自定义字体;
  • background属性:背景色支持很好,但背景图片支持度则要差很多,如果你需要用到背景图片,最好设置一个类似的背景色做优雅降级处理;
  • float、position属性:千万别照搬Web的层叠布局理念,这是两个高危属性,老老实实搭积木吧;
  • margin、padding属性:这两个也支持不好,所以不等高、宽的设计方案在实现过程中兼容性问题很大;

我们在处理加粗、高亮、current状态、链接颜色等设计元素时,需要充分考虑方案的兼容性。因此建议所有刚接触WAP设计的同学,在动手之前,先认真的了解下手机浏览器对于HTML & CSS的限制,这能帮你在工作中快速的给出最合适的设计方案。

三、人们用手机完成什么样的任务

几年前有人曾说过“手机上最适合的任务就是阅读”。而随着移动互联网概念、网络条件以及移动设备的不断升级,手机上各种类型的站点和应用层出不穷, 越来越多PC端的产品被移植到手机端。本文只是粗浅的介绍三种常见的任务类型,在设计过程中我们可以反复问自己一个问题“用户是希望通过这个产品完成什么 样的任务”,牢牢记住这个问题便能无往不利。

  • 阅读型
  • 互动型
  • 工具型

Ⅰ、阅读型

用户在这类应用场景下核心的诉求就是阅读。把“阅读”展开后又能进一步发现用户的子诉求:快速呈现内容、完整的目录导航、优秀的排版、随时记录阅读进度……将这些子因素一个个的拆解开来分析,然后再组装起来便能产出一份不错的阅读类产品。

Ⅱ、互动型

该类产品的核心应用场景就是互动,无论是人与人的互动亦或是人与机器的互动。那么如何响应用户的操作则是这类产品的设计重点。响应也分很多种,有的 在用户知晓响应之后还需要引导其进一步操作、有的需要用户持续性的关注、有的仅仅是通知用户即可。这类产品也是目前最为火爆的:新浪微博、人人网、腾讯 WAP QQ等等都是其中的典范。

Ⅲ、工具型

顾名思义,用户需要通过这类产品解决某一个问题。因此,“以任务为导向,并对其进行拆解设计”则是该类产品的设计核心。最具代表性的产品是搜索引擎,它的核心任务就是帮助用户搜索信息。

Mai同学有一篇文章比较详细的对iPhone应用的类型进行了分析,虽然跟WAP站点存在某些差异性的东西,但本质性的东西却有着异曲同工之妙。

四、用户的使用场景

手机这样的移动设备与PC机最大的区别就在于用户总是随身携带,用户在任何场景下都有可能掏出手机来把玩一番:公车、地铁、商场、大马路、床上、厕所……但这些场景均有一个共同点:用户非常容易被周遭环境所干扰而中断任务,因此手机上只适合做单线程的任务!

mdchina上有一篇关于用户如何使用应用程序的文章,介绍用户的使用场景,感兴趣的朋友请移步!

后记

终于写完了!为此还荣获了一个外号:草稿帝!虽然文章最后结束得有点仓促,不过核心信息已经表达清楚了,并且用户的使用场景并不是三言两语能讲述清楚的。在以后的项目案例分析时再根据实际项目情况为大家阐述吧。

为了整理数量庞大的知识碎片及项目资料耗时甚多,笔者期望尽可能的将该系列文章阐述的更具框架性和条理性,因此后续文章的更新速度依然会很慢,急性子的朋友可得多多包涵了!

原文:http://m.mdchina.org/?p=351

导读:如今几乎每个人都能拥有自己的网站,网站制作起来也方便了很多。如何更好的把握网站访问者的喜好,为用户提供一个可读性更强的网站?这其中颜色就起到了相当大的作用。

颜色是否影响网站访客?

几年前网站还是奢侈品,而如今几乎每个人都能拥有自己的网站,网站制作起来也方便了很多。但问题依然存在,那就是如何更好的把握网站访问者的喜好,为用户提供一个可读性更强的网站?这其中颜色就起到了相当大的作用。

颜色对网站访客有多大影响?

研究人员很早就发现颜色会对人的心灵产生很大影响,网站通过不同的配色方案,可以观察是否对用户的访问有吸引力,特别是新用户或用户离开网站时。

而且更重要的一点,网站颜色影响的往往是潜意识。通过颜色可以让用户产生烦躁、快乐、兴奋、无聊等情绪。

那么如何能让网站配色方案更吸引人?这里有几个配色建议

1,尽量使用网页安全色,也就是自然界中存在的颜色,而非显示器合成的非自然颜色。
2,网页背景颜色与文字对比度要高,一般来说白色背景常会选择黑色字体,当然这也不是绝对的,像深蓝色、灰色也是网页字体常用的色彩。
3,避免蓝色与红色,蓝色与黄色,绿色/蓝色与红色这几类颜色同时出现。因为这样会很容易让人感觉视觉疲劳
4,颜色使用要始终具有同一性,研究表明5种颜色是网站的极限,一般不要超过五种颜色。
5,尽量少用细小的字体或蓝色表格。
6,有些颜色本身是很枯燥的,比如灰色,但配合一些橙色或亮色就会产生完全不同感觉,可以尝试下。
7,可以利用留白来平衡网站中的颜色刺激
8,要始终保持颜色统一,这也是网站可读性重要的方面。

颜色与人

不同年龄段的人对于颜色偏好是不同,可以针对您网站的用户年龄特点来进行颜色搭配,比如:

老年人与青年人的颜色喜好

一定年纪的人更实用那些冷静和克制色彩的网站,而年轻人更喜好生动与光明的色彩。

男人与女人的颜色喜好

男性更喜欢蓝色、橙红色与黄色。而女性更喜好红色、蓝色、黄色至橙色。此外女性被证明可以比男性看到更多的颜色。

国家地区与颜色

不同国家有自己的颜色喜好,特别是在一些国家某些颜色是不好的象征,这点对于设计师来说要格外注意。
比如在西方国家白色代表纯洁,而在中国、日本、印度白色往往代表不幸。粉红色在日本很受欢迎,而在印度或东欧国家则代表没有男子气概。
紫色与红色在阿拉伯国家代表轻浮。而且对于犹太教、基督教、伊斯兰教中最好也别用紫色。
此外蓝色几乎被所有国家都能接受,因此他是相对安全的颜色,同时蓝色也是一个国际颜色。很多国际组织都使用过蓝色。

关于颜色的讨论可以有很多,但最重要的一点就是设计师要在平时的网站设计中不断观察总结,如果选择正确的颜色也是考验每个网页设计师能力的时刻。

本文由www.tutu001.com原创,转载需注明出处

Powered by WordPress & Theme by Anders Norén