29
Nov

手机软件界面设计流程

 通过前阶段的工作实践,总结了手机软件GUI设计的流程:

首先,确定GUI需求:

手机界面分辨率:240*320

实际尺寸大小:

机器外形硬件和软件的特性:

客户的GUI需求:

 其次,明确我们设计师的任务

1.必须深度了解任务和用户分析

2.设计师、界面和交互模型

设计师必须尽可能的把用户的认知和形态特征了解全面。

了解的内容主要包括:

  • 人机匹配性,进可能的做到用户意图和界面允许动作之间很好的匹配;
  • 全面的了解用户的技能和弱点,用户一般会存在思维、学习求解的能力,同时也具有健忘、精力不集中、易出错、疲劳、情绪不稳定等的弱点;
  • 用户的知识背景调查(需要了解手机产品的目标投放群体和产品定位);
  • 用户对系统的期望和态度;

3.保证界面设计的一致性原则、而且要合理利用界面的布局结构,保证界面的简洁易用;合理利用颜色,确保显示效果与内容和形式的统一; 一般来说,大多数大众普及型软件的界面最好保持传统的风格,采用一些柔和、中性化的色彩。

4.图标的设计上,要直观、形象、喻意性强。

5.快捷方式的提示设计(是否有需求添加,需要UI设计师支持)

还有,GUI设计详细流程定义:

  1. 项目开始GUI设计时间点之前,明确客户的GUI需求,了解机器外形硬件和软件的特性。
  2. 概念设计【提供GUI设计方案几套,参考产品组人员和领导层的建议,但最多3套,精心设计各套方案;项目组和产品组共同进行方案评审会,决策方案;并且需要项目组提供真机,展开界面的真机效果和环境测评,优化界面颜色、亮度等细节)】;
  3. 详细设计【需要明确界面研发的细节;建议项目提出强烈建议优化的几项产品设计点(用户调查)】;对界面有变化的界面进行统计,整理出文档提交给UI层面技术工程师,做好相关的界面准备工作。
  4. 原型设计时间【目前国内研发软件的现状通常此环节被忽略,但时间充足,建议按计划进行】
  5. 与UI层面的技术工程师共同展开界面实现(界面实现和界面优化的时间点控制在项目时间的百分之几点,需要明确
  6. 界面工程师制作好Demo,提交给项目负责人、决策人和UI用户界面测试工程师(需要指定负责人),展开用户体验反馈建议汇总,提出用户界面体验的反馈意见表(需要项目负责人支持)。 
  7. 测试评估,尽早发现存在的交互设计和视觉设计的不足之处,进行软件界面的改善设计。
29
Nov

Windows Mobile 7交互界面整体GUI设计风格

Windows Mobile 7交互界面整体GUI设计风格:黑色和钴蓝色配色风格,特点:沉稳商务 .

信息列表(图一) 功能列表(图一) 提示框(图二) 选项弹出菜单(图三) 地图界面(图四)
UI交互:同级别导航栏

背景:白色

聚焦:蓝色高亮

UI交互:同级别导航栏

背景:蓝色

聚焦:蓝色高亮

效果:非聚焦项后隐

有两种方式:

1.横截屏置灰提示

2.白底灰色字体提示

特点:居中

背景:白色

聚焦:蓝色

效果:非聚焦项后隐

UI交互:地图缩略图

特点:界面干净整洁

(图一)(图二)

(图三)(图四)


29
Nov

软件界面设计基础

 1.1人机交互的基本概念

软件界面就是人与机的信息界面。

人机交互是一种结合计算机科学、心理学、人机工程学等众多学科的工业和商业领域内的交叉性学科。

人机交互系统包括人、软件、硬件、以及作为环境的有关文档手册。

人机界面的交互方式有语音、文字、图形、人的表情、手势等方式。

交互设备:输入和输出设备。

人机交互领域内的“域”,一般分为行为域(behavioural domain)和构造域(constructional domain),即交互设计(interaction design)和界面软件(interface software)

1.2人机界面的用户分析

了解用户的习性、技能、知识、经验等环境,以测试不同用户层面的需求和反映。

用户分类:外向与内向、感性与理性、专业人员与非专业人员等。

用户行为模型:设计师、界面与用户的交互模型

设计师对用户的想法和对系统的期望有自己的理解,这些是基于用户的任务和需求、用户的背景、经验和能力,以及人脑信息处理机构的热点和限制等考察基础之上的。

对用户的认知和行为特性的分析能够帮助设计师正确的估计软件界面的复杂程度,提供清晰的结构,以及与之相联系的用户手册和操作手册。

设计师结合自己的经验和技术,构思后转化为界面的形式,给用户一种诱导;用户会借助以前的产品使用方式,以联想的方式与设计师设计的界面进行交互;当这种交互达到一致或者某种耦合时,那么这种形式的界面就能够满足用户的需求,就是好的设计。反之,会误导用户达不到满意度。

界面开发设计的原则:

  1. 一致性原则;
  2. 提供信息反馈;
  3. 合理利用空间保持界面的简洁;
  4. 合理利用颜色和形式的统一来实现内容与形式的统一;
  5. 使用图形和比喻;
  6. 对用户出错的宽容性和帮助功能;
  7. 尽量使用快捷方式;
  8. 允许动作的可逆性;
  9. 尽量减少用户的基于要求;
  10. 快速的系统响应和低的系统成本;
  11. 设计良好的联机帮助。
04
Aug

2008最佳Web2.0网站

以后的网站是内容为王,seo也是这样,要保证网站的更新,必须要靠大家的力量,这样就是web2.0时 代,当内容和秩序(大家都在无私的贡献内容),剩下的就是对现有信息能够自动的进行分类再呈现给人类,我想那就是web3.0时代,大家有了这么高的觉 悟,估计离我们神圣的XX主义已经不远了。希望这个列表对seo届重视内容的同仁有帮助

分类 第一名 第二名 第三名 提名奖
社会化书签 Del.icio.us StumbleUpon Furl Mister Wong, Ma.gnolia
图书相关 Lulu Biblio VuFind WorldCat, LibraryThing
分类目录 Craigslist Oodle Parking Search Go2Web2.0
协作文字处理 Google Docs Writeboard Thinkfree Celtx
在线表格 Wufoo Dabble DB EditGrid Instant Bull
在线存储 Onmidrive Fluxiom esnips Totoexpress
教育类 .Docstoc Mango Languages SpanishPod Livemocha
求职类 Standout Jobs CareerBuilder Monster Mployd
事件管理 Upcoming Going Confabb Eventful
食物相关 Im Cooked Urbanspoon iFoods Recipe Key, Crazymenu
娱乐类 Cocktail Builder HairMixer Comiqs One Sentence
游戏类 Zango Galaxiki Doof Guess The Google, Arcaplay
家谱类 MyHeritage Geni Amiglia GeneTree, AncestryPress
本地搜索 Yelp Google Local Citysearch Yahoo! Local, Menuism
健康相关 Revolution Health PEERtrainer iMedix Icyou, Health Ranker, Medstory
wiki站点 PBwiki Wetpaint Wikispaces Wikidot
地图应用 Frappr Wayfaring CommunityWalk Rrove, InteractiveMaps
地图服务 Google Maps Live Maps Google Earth Yahoo! Maps
手机技术 Twitter Myxer Juicecaster Plusmo
音乐相关 Last Pandora Mog Amie Street, LyricsMode
博客搜索 Google Blog Search Bloglines Technorati Icerocket
社会化网络 MothersClick Tu Diabetes Imbee Motortopia
在线OS Zimdesk G.ho.st Goowy Glide Digital
资源组织 Backpack Zoho Wufoo  
慈善相关 Care2 Giveness DonorChoose BeGreenNow
照片图像 Flickr Picnik Picasa Splashup
专业化网络 LinkedIn Biznik Professional On The Web Xing
提问建议 Yahoo! Answers Minti Fixya BuzzDash
房地产 Zillow Rentomatic HotPads  
零售类 Threadless Etsy Stylehive StylePath, Shopify
搜索类 Tweetscan Rollyo 50 Matches Alpha Search
社会化网络 Twitter Facebook Bebo MySpace, Friendster
新闻类(s) Sphinn NowPublic PlugIM Campus Reader, Design Float
新闻类(b) Del.icio.us Digg Reddit Mixx
体育类 iStats TeamSnap Oobgolf Gympost
个性主页 Netvibes Pageflakes iGoogle My Yahoo, Groovle
旅游类 Farecast Kayak Boo Gusto
视频类 YouTube BBC Player Metacafe Dailymotion
视觉艺术 ColorBlender Swivel VisualComplexity The One Million Masterpiece, The Broth
网络开发 Yahoo! Pipes Yahoo! User Interface Library jQuery Collabtrak
Widget Yourminis Flock Clearspring SpringWidgets, Conduit

作者: 4111y80y

04
Aug

尝试用GoAnimate制作

GoAnimate就是一个使用简单而且功能强大的在线动画创作工具,GoAnimate不仅提供了丰富的动画创作资源,并且构建了一个动画创作分享网络社区。

GoAnimate的创作,很简单,只需要利用其提供的动画模板修改即可,你可以在上面增加人物对吧,修改背景页面,修改背景音乐,在时间轴上面的各种操作也都很方便。创作完之后,可以设置为私有或者公开,可以通过Flash方式在你的网站或者Blog调用显示。

你可以在这里查看别人创作的各种动画作品,很有意思,之前觉得做Flash 很麻烦,不过通过GoAnimate,你也可以制作效果不错的Flash动画作品。

这是我尝试制作的简单画面链接~

http://goanimate.com/go/movie/0ipTLZ75zW6k?utm_source=facebook&uid=183431

donghua.jpg

本想内嵌到我的WORDRRESS站点,可是,好像这个动画制作社区不支持。只好做了个贴图上来了。不过可以内嵌国外社区facebook网站。

03
Aug

App Store,开启iPhone新时代

app store
iPhone 3G 在今天开始陆续在各地上市,现在在 iPhone 2.0 上线之前,App Store 已经已经出现在新版的 iTunes 7.7 底下,目前已经有500多个应用(其中免费的有100多),包括游戏、商业应用以及互联网应用,互联网应用包括一些重量级的选手,像 Facebook, MySpace, AOL, eBay等,其中也有我们以前说网络收音机时提到过的 Pandora(包括论坛中),Pandora 已经在其他一些手机上可以使用,但在 iPhone 上它是免费的(AT&T 和 Sprint 上要月费)。而更多的应用会纷至沓来,所谓一步领先,步步领先。

就和 iPhone 刚推出时一样,这些都是用户一直期待的,移动互联网的成熟让人们不再满足于简单的通讯,或者局限于固定的场所(前文:走下电脑的 Web 2.0,催生一片新天地),人们从工具消费转向了内容消费。甚至我们可以看一些web 2.0的服务,感觉就是为移动互联网而生,比如 twitter,比如 Pandora,甚至是“云”计算

就一些简单的元素来说,比如互联网应用到手机上,触摸屏等,iPhone 并不是首创,App Store 之类的第三方应用 iPhone 更是一个后来者,那为什么只有 iPhone 才能树起里程碑? Windows Mobile 现在已经超过了1万8的应用供下载,Palm 有3万多的开发者,对于大众用户来说,有多少印象呢?上面说到一些web 2.0的服务感觉就是为移动互联网而生,而当看到它们在 iPhone 上的界面,就感觉它们就是为 iPhone 而生,强调易用,icon识别等,何况web 2.0一些视觉元素感觉就是 Apple 的风格。App Store 的运营方式也和 Web 2.0 的轻量级开发模式天然相容。

是因为 iPhone 的用户界面,iPhone 的用户体验或者说 Apple 的设计以及品牌。我们可以看看 iPhone 之后的各种触摸屏手机受欢迎程度的比较,比如关注较多的 HTC 几款,很多因素是因为它的界面设计。Mac OS 针对 Windows 的用户体验方面的优势在小屏幕上区分更加明显,而这些第三方应用在 iPhone 上看起来是多么和谐以致让其他手机系统上的同一应用感觉不是很爽。影响的因素有很多,比如对第三方设计上的控制,比如指导意见,比如开放框架,不久前 Nokia S60 选择了 TAT Kastor 作为 UI 的渲染平台(再前一点:Nokia全部买下 Symbian 然后准备开源)。但更深层的可能是 Apple 的设计的一贯潜移默化的影响。当然也不是每一个应用都能保证的,比如前不久饱受批评的 Stevens Creek 的 iPhone 应用。

试看竞争对手如何来面对 iPhone 的气势,从最有挑战实力的 Nokia 到最具期待的 Android,以及被 iPhone 带入漩涡的那些“像 iPhone”的触摸手机。

另推荐一篇 apple4.us 上的文章,讲 Jobs 和 Mac OS 界面的一些故事。

补充:现在可以看到很多 App 的介绍以及视频演示,下面是来自 Google 的 Google Mobile App:Searching on an iPhone can be fun


Pandora Radio,将会是最热门的 App 之一(如果 Apple 收购它,在线音乐又会是怎样?),可惜在中国早已不能用即使 iPhone 3G 上轨,只能用 Last.fm 代替:

更多可以见 Techcrunch 的 iPhone Application Overview And Demo Videos,还有一个短时的下载排行

30
Jul

Hyperdesk 终于发布

Hyperdesk 终于发布了。

Click to continue reading “Hyperdesk的视觉震撼”

30
Apr

世界地球日之 google 篇

世界地球日

今天是世界地球日,在此记录下这个很有意义的日子。

GOOGLE此举,让更多的用户意识到了“环境保护的重要性”。观察GOOGLE,它通常会以 标志字体和节日隐喻图形相结合的手法来体现他们的社会责任。从社会层面说,整个社会给予了GOOGLE发展的机会,GOOGLE也以它独有的方式回报了社会。这种做法很值得提倡,也很有意义。

下面是“世界地球日”的起源:

世界地球日活动起源于美国。1969年,美国民主党参议员盖洛德·尼尔森提议,在全国各大学校园内举办环保问题讲演会。时年25岁的哈佛大学法学院学生丹尼斯·海斯很快就将尼尔森的提议变成了一个在全美各地展开大规模社区性活动的具体构想,并得到很多青年学生的积极响应。1970年4月22日,美国举行了声势浩大的“地球日”活动,数十万群众参与集会,呼吁创造一个清洁、简单、和平的生活环境。

作为现代环保运动的开端,“地球日”活动推动了多个国家环境法规的建立。1990年4月22日,全球140多个国家、2亿多人同时在世界各地举行形式多样的环境保护宣传活动,呼吁改善全球整体环境。这项活动得到了联合国的肯定。此后,每年的4月22日被确定为“世界地球日”。

30
Apr

Work中的icon设计

8d652a8676c0622e66096ef1.jpg

工作中设计的icon,一直放在自己的baidu博客(http://hi.baidu.com/icongirl/blog)里的。

28
Apr

技术是软件的大脑,那么UI就是软件的灵魂 (mapbar图吧导航)

mapbar的图吧导航产品,不但在技术上实现了3D可视地图,UI上也力求美观精湛。

技术是软件的大脑,UI是软件的灵魂。

MAPBAR:平台决定我们要做什么,我们在现阶段不可能实现iphone类似的交互体验效果。那么,我们要做的就是利用现有的平台和资源尽可能实现最佳的交互体验。mapbar图吧导航产品,精致的图形设计和绚丽的界面风格组合,以及3D的可视地图,极大的提升了mapbar软件用户的交互体验。

以下是mapabr“图吧导航”产品界面:

272.png




 

December 2008
M T W T F S S
« Nov    
1234567
891011121314
15161718192021
22232425262728
293031