如何进行有效的GUI设计2014.11.7ByIvanUserExperienceDesign它是用户体验的设计门类(用户研究、交互、视觉）的集合用户体验要素模型GUI（图形用户界面）设计在模型中的所处位置视觉设计的基本流程概念提取概念设计详细设计落地和交互设计的关系和用户研究的关系品牌基因的关系评价原则常用的思维方法：元素提取控件的系列化设计，典型界面的整体设计图标、语言、色彩、动画的统一、操作行为的统一常用工具介绍1.基本用户体验概念介绍2.企业中一般的用户体验流程是怎样的？3.常用的寻找概念的方法4.实例说明(偏GUI方面）5.一些评价原则&标准的探讨(偏GUI方面）1.基本用户体验概念介绍2.企业中一般的用户体验流程是怎样的？3.常用的寻找概念的方法4.实例说明(偏GUI方面）5.一些评价原则&标准的探讨(偏GUI方面）用户体验5层次要素模型外在（表象、视觉刺激）文本图标界面内在（灵魂、根源）交互业务理解用户理解战略理解用户体验5层次要素模型表现层一系列的网页（界面），由图片组成框架层按钮、表格、照片和文本区域的位置结构层确定各种特性和功能的最合适的组合方式范围层功能和特性是否被纳入，即设计范围战略层经营者和用户分别想从网站得到什么。任务界面对话层导航层信息架构的目标：帮助人们快速高效的找到所需信息，并提供良好的用户体验。用户任务:输入数字输入文本输入公式格式细胞排序信息过滤信息聚合信息图数据保存数据导入数据出口数据打印业务目标:取代竞争产品激励销售其他集成产品建立文件格式为默认信息共享格式用户类型:会计商务策划师主妇使用场景:办公桌面笔记本在飞机pda在汽车例如:我们要设计一款“校园购物”的APP我们将如何进行？目标:业务目标用户模型与用户目标任务：用户任务和活动场景功能规格工具:导航地图概念地图页面线框图UI设计指导GUI视觉风格指导可用性测试用户界面原型设计活动低保真高保真时间线1.基本用户体验概念介绍2.企业中一般的用户体验流程是怎样的？3.常用的寻找概念的方法4.实例说明(偏GUI方面）5.一些评价原则&标准的探讨(偏GUI方面）详细设计概念设计Mockup用户测试用户测试竞争分析设计趋势市场趋势用户研究商业目标用户目标迭代反复这个过程非瀑布式的按部就班，而是敏捷的反复迭代过程。开发原型设计1.基本用户体验概念介绍2.企业中一般的用户体验流程是怎样的？3.常用的寻找概念的方法4.实例说明(偏GUI方面）5.一些评价原则&标准的探讨(偏GUI方面）A.头脑风暴一种创造能力的集体训练法准备进行中总结方案筛选1.准备，必须进行脑力激荡材料的准备，会场布置，避免打搅的事前安排等2.安排，除分组，限时外，还需有个主持人进行会议牵引和规则监督3.总结，对概念进行归类整理，并最终又专人进行概念陈述4.方案筛选，需要回答是否已经解决当前问题，并且是否新颖1.禁止批评和评论，也不要自谦。对别人提出的任何想法都不能批判、不得阻拦。即使自己认为是幼稚的、错误的，甚至是荒诞离奇的设想，亦不得予以驳斥；同时也不允许自我批判，在心理上调动每一个与会者的积极性，彻底防止出现一些“扼杀性语句”和“自我扼杀语句”。诸如“这根本行不通”、“你这想法太陈旧了”、“这是不可能的”、“这不符合某某定律”以及“我提一个不成熟的看法”、“我有一个不一定行得通的想法”等语句，禁止在会议上出现。只有这样，与会者才可能在充分放松的心境下，在别人设想的激励下，集中全部精力开拓自己的思路。2.目标集中，追求设想数量，越多越好。在智力激励法实施会上，只强制大家提设想，越多越好。会议以谋取设想的数量为目标。3.鼓励巧妙地利用和改善他人的设想。这是激励的关键所在。每个与会者都要从他人的设想中激励自己，从中得到启示，或补充他人的设想，或将他人的若干设想综合起来提出新的设想等。4突出求异创新，这是智力激励法的宗旨。5.与会人员一律平等，各种设想全部记录下来。与会人员，不论是该方面的专家、员工，还是其他领域的学者，以及该领域的外行，一律平等；各种设想，不论大小，甚至是最荒诞的设想，记录人员也要求认真地将其完整地记录下来。6.提倡自由发言，畅所欲言，任意思考。会议提倡自由奔放、随便思考、任意想象、尽量发挥，主意越新、越怪越好，因为它能启发人推导出好的观念。7.强调小组整体利益，不强调个人的成绩。应以小组的整体利益为重，注意和理解别人的贡献，人人创造民主环境，不以多数人的意见阻碍个人新的观点的产生，激发个人追求更多更好的主意。8.综合改善原则。探索取长补短和改进办法。除提出自己的意见外，鼓励参加者对他人已经提出的设想进行补充、改进和综合，强调相互启发、相互补充和相互完善，这是智力激励法能否成功的标准。9限时限人原则。专家小组规模以210人为宜，会议时间一般以2060分钟效果最佳。为使与会者畅所欲言，互相启发和激励，达到较高效率，必须严格遵守下列原则：头脑风暴的原则如何去找到爱订云的目标客群？头脑风暴进行中由主持人公布会议主题并介绍与主题相关的参考情况分组等设想的分类与整理设想的分类与整理实用型幻想型实用型幻想型设想的分类与整理头脑风暴进行开发，通过进一步开发，就有可能将创意的萌芽转化为成熟的实用型设想。头脑风暴去进行论证、进行二次开发，进一步扩大设想的实现范围质疑式头脑风暴提出质疑编制评论意见表意见评估对每一个设想提出质疑“XX设想是不可行的，因为，如要使其可行，必须。”对每一个设想提出质疑,明确否定原因、改善建议禁止对已有的设想提出肯定意见，而鼓励提出批评和新的可行设想筛选出实际可行的方案重点是研究有碍方案实施的所有限制因素，并发现新的解决途径。B.黑客马拉松Hackathon思维碰撞与接力1234512345思维接（借）力分组每队6个人轮流输出点子，且保证不重复。张XX李XX王XX钱XX孙XX快速预定快速送达和附近商铺行成联盟情人节表白服务支持赊账校园购物O2OAPP应具备哪些功能？如何识别并撬开大客户的门，高效卖出爱订云的产品？1）方法上？2）资源上？3）工具上？4）其它？C.思维导图适合一个人进行问题总结或者发散东尼博赞，1942年生于英国伦敦，英国大脑基金会总裁，世界著名心理学家、教育学家。他曾因帮助查尔斯王子提高记忆力而被誉为英国的“记忆力之父”。他发明的“思维导图”这一简单易学的思维工具正被全世界2.5亿人使用。推荐工具：Xmind，MindManager整理思维碎片梳理关系脉络结合线性和发散思维帮助思考或者记忆可作为学习工具，对学习过的知识进行整理发现可能的解决方案可作为思维工具，寻找合适的解决方案D.随机词汇法适合思维完全进入死胡同状态启用写下创意主题寻找身边任何物品发散出名词寻找合适的创意1.发散出15个以上词汇2.每个词汇代表这个物体的特性3.名词不要太抽象筛选出实际可行的方案与主题关联产生联想特性词汇开一家主题餐厅？随机物体创意构想帆船模型鱼大海漂浮浪花海盗罗盘木头做的麻绳鱼形装的各种装饰，如餐旗、窗帘挂饰桌子上放个大鱼缸，养五颜六色的热带鱼椅子设计成可以漂浮的背景音乐里有海浪声服务员穿海盗服餐馆的VI要强调导航设计菜单刻在木头上，餐具用木头的和周围的时尚捆绑销售，如，送当季热门电影票E.如何管理直觉和灵感学会记录自己的瞬间灵感直觉应该是超越五感的，比如我们经常说的第六感1.是指对一个问题未经逐步分析，仅依据内因的感知迅速地对问题答案作出判断，猜想、设想；2.在对疑难百思不得其解之中，突然对问题有“灵感”和“顿悟”；3.甚至对未来事物的结果有“预感”“预言”等虽然不知道那是什么东西，但所有的直觉都有一种不知道从何而来的凭空出现的特质，突然而降，出乎意料，心生一念，非常深邃之类的。他们的注意力往往是悬空的，没有固定的依附对象，经常处于发呆状态，脑子空的。等待素材的碎片自动出现，然后抓住碎片开始咀嚼学会随时记录自己的瞬间灵感1.基本用户体验概念介绍2.企业中一般的用户体验流程是怎样的？3.常用的寻找概念的方法4.实例说明(偏GUI方面）5.一些评价原则&标准的探讨(偏GUI方面）任何与视觉相关的设计首先要把抽象概念翻译成形容词汇再由形容词汇转换成可见的图形概念形容词可见图形项目目标SetupaProjectGoalasanelementforthepurposeandtherangeoftheproject.WestrategicallyapproachandcreatenewOutdoorGUIconceptWithOutdoor keyfactor.To create a set of mobile phone Theme GUI, which match the Smart Phone and enhance the brand image.要创建一套与智能手机相匹配的主题界面，以提升品牌形象Make a new design direction out of 3 sets design.在三套方案中选出一个方向 Cooperation with Discovery与Discovery合作Design Direction Instrument / Sporty Outdoor设计方向工具/运动户外 Analyze target users requirement分析目标用户的需求 Understand trend and lifestyle了解趋势和生活方式Analyze target market information to find new market opportunity分析目标市场信息，寻找新的市场机会合乎情理的GUI设计以匹配户外活动人群研究方向ItillustratesmainissueofNewDesigndirection.VitalizedeconomyandoutdooractivityOutdoor-orientedcosumerclassPopularizedoutdoorstyleLifestyleandoutdoordeviceSmartphonemarket市市场MarketInvestmentforthequalityoflifeandactivitiesToolforemotionaldevelopmentandself-managementDesireforexpressingindividualityIncreasedparticipationoffemaleandyoungpeopleWilltoreturntonature趋势TrendUsersegmentintheactiveareaofoutdoorUsersstoriesaccordingtotheintensityoftheirdailyroutineandactivities目目标用用户Target User市场Theclassoftwentiestofortiesaremostactiveconsumersamongalltheoutdooractivities.Maleandfemaleoutdooractivitiesarealmostthesameasitgoesdowntothelowagedclass.Man60%Woman40%Tendencyinconsumptionoftheoutdooractivitiesaccordingtothegenderratio1020304050ManWomanAgeFemaleconsumershavebeenincreasing.Themainclassofconsumeristwentiestoforties.Weanalyzephenomenonpresentedintheoutdoormarket.ThefollowingistheelementsthatwecomposedbyanalyzingbehavioralpatternsInordertofigureouthowtheybehavewithuserspurposesandneeds.WederivecharacterbyanalyzingActivitiesandbehavioralpatternsofOutdoorTrend.用户行为改善用户体验的因素efficient touseefficient tousesafe to usehave goodutilityeasy to learneasy toRememberhow to use兴趣激励有帮助美观创意支持娱乐过瘾奖励满意情感照顾趋势Thisistheissueweneedtopaycloseattentiontoatoutdoortrend.Increaseininterestinleisureaccordingtotheincreaseinthelevelofincome1.point: Economic Growth, The Quality of Life, Wealth, Various Things to Enjoy, Leisure CultureWiththeintroductionofamarketeconomy,theleveloflifehasincreasedandtheinterestinleisurehasbeenincreasing.Moreover,demandinleisurehasbeensteadilyincreasingafterBeijingOlympicGamesin2008.Awayfromsimplematerialisticconsumptionpattern,asthedemandshiftedtomorediverseanduniqueexperiences,outdoorexpenditurehasincreased.Dreamaneco-friendlylifethatisslowandfree.2.point: Eco, Free of Mind, Free of Time, Eco-Friendly, SlownessPeoplewhoareexhaustedbymaterialcivilizationandexcessivespeedcompetitiontrytofindsimpleandeco-friendlylife.Whilebeingwaryaboutbeingaccustomedtorapidculture,theywouldliketoenjoytheprocessofSlowfood,SlowCity,SlowLifebytakingtime.Activity1.Routine_ Self-ExpressionAtypethatenjoyoutdooractivitiesasameantoexpressoneslifestyleandIndividuality.用户设定Wearegoingtoexaminewhattheywantintheparticularlevelofactivitythroughuserscenario.keyword: Partoffashion,Representtheeconomiclevel,Expressindividuality,RepresentLiberalLifestyle,PartofCulturalActivities,SophisticatedTasteandPreference,ClosetotheoutdooractivityoutofthecityAppeal My PreferenceIboughtSUVforleisuresothatIcanloadequipmentstoenjoysports.Ihaveintentiontoshowoffthefactthatthisisnotapopularsportthatanyonecando,butprofessionalactivitythatonlysomeonewhoareaddictedcanenjoy.Thisisawaytorepresenttheleveloflifethatisdistinguishedfromothers.Buy a Sensible LifestyleIcanexpressmyselfwithcharacteristicleisure.Becausetherearelotsofwaystospendtime,Ithinkthatitisprogressivetogooutsideandperformproactiveactivities.Iwouldliketobeshowntobeanactivepersonwithsophisticatedtaste.Activity2. During Light Activity_ Self-satisfaction-orientedAtypeofapersonwhogoesoutsidethecityandspendsomequitetimeinteractingwithnatureoutside.Wearegoingtoexaminewhattheywantintheparticularlevelofactivitythroughuserscenario.Expand the radius of activities from inside to outsideWegooutsidetoseekuniqueexperienceespeciallythesedayswhenwefeelboredwithrepetitivedailyroutine.Weseekdistinguishedexperiencethatwillneverbeattainedinsidewhileenjoyinghobbiessuchasle-ports,dance,andhealth.Find genuine pleasure of life from outdoor lifeBodymovementallowspeopletofindlifevalueswithdifferentform.Peoplecanspendtimewiththeirfamilyandpeoplenexttoeachotherwhiledevelopingintimacyandenjoyingsocialactivities.Pursue Natural ExperiencePeoplewantofindpsychologicalhappinessfreefromextremespeedinessandpressureinourmodernages.Peopleconsidernature-experiencesimportanttolookforthegreenforestsofafamousmountainandlightlyclimbupthemountainforpeaceofmind.keyword: FunLeisure,Smallpleasure,Relaxation,naturalactivity,adesireforthebodymovement,socialinteraction,casualactivity,interactionwithnature,activitythathelpsthinkingandspeculation,leisurearoundroutine,Lets enjoy our life because we worked hard!Wewouldliketomakeourfreetimemeaningfulforthebalanceofourwork,health,andrelaxation.Inthemidstofthebusylife,peoplegotosuburbsandtakepleasureofoutdoorsports.Sometimestheytravelnearby.It becomes chance to look back myselfTheyenjoyspeculationwhiletakingalightwalkatsomewhereelsethanroutineplace(suchasparknearby,notanoffice).Atthistime,itsnotforfunorentertainment,butformoreliberalandmentalrelaxation.用户设定Activity3. During violent activity_ Achievement orientedWithactivebodymovement,Atypeofactivepersonwhofindsbalanceinhishealthylife.Wearegoingtoexaminewhattheywantintheparticularlevelofactivitythroughuserscenario.Improve the life quality by staying healthyThelifewithWell-beingandwellnesscomesfrommyhealth.Wewalkorrideabiketogotoworkonpurposeasaninvestmentforhealth.The transformation in concept on ActivityPerformaleisureactivitywithspecificpurposeratherthanjustbeingcomfortableandrelaxed.Itisbecausepeoplewanttoenjoytheaccomplishmentthattheyfeelfromovercomingtheirphysicallimitationaswellassatisfactionfromtheirwork.keyword: Interactionwithnatureandpeople,leaderofalife,ensuringpassion,newadventure,deviationfromdailyroutine,expertise,healthyimage,functionalassistance(safety,checkingactivities),proactiveattitudetowardshealthylife,Usingitemsthatmakepeoplefeelcomfortableduringviolentactivities,livelymood,pleasurefromtakingrisksCombination of Physical and Mental HealthApersonbeganexercisingforhishealth.Hehadtheirfrequentlateworksandirregulareatinghabitsandrhythms.Ashemoveshisbody,itleadshitohavearegulareatinghabitandhegraduallydevelopedsoundbodyandmind.Blow the stress from their active movement. Hedliketoexpresshispassionoutside.Heislookingforlittlemoreviolentleisurebecauseheenjoyscompetitionwithhimselfandothers.用户设定1.Exciting&Colorful2.High-end&Simple3.Modern&Eco4.Basic&minimalism5.Wild&ExtremeWit&CreatvieExtremetechnologyBasicModernHigh-endMinimalismPre-natureColorfulWellnessCozyUsefulSpritWileSimpleElectronicValuableWedevelopkeyexpressionwordstomainvisualdirection.Specialized专业Naturalism自然主义一致性基调&风格视觉关键词WittyColorfulFashionableYoungSophisticatedExclusiveFuture-OrientedIntheedgeMasculineDetailedChicSoftVacationNature-FriendlyRoutineWarmNaturalWell-Being概念案例描述ExtractcomponentsofConceptDesignprofessional& impressive meaningful& ecoeveryday& LivelinessConceptLively活泼设计元素A. Lively（活泼的）Thelookwithlivelycolorandwittyelementsexpressesyounganddynamicbyusingvariousshapesandpattern.Pattern,VividColor,ScribbleEffectShapeMaterialColoreveryday& LivelinessWittyColorfulFashionable YoungLivelyB. Specialized （专业的）WeexpressluxuriousfeelingbyaddingspecificelementsonasophisticatedandfutureorientedshapeEmphasizemorechicandmasculinefeelingbyusingstrongpointcoloronacolorlessbackground.Edge,Wild,profession,firmEffectShapeMaterialColorprofessional& impressive Future Oriented, In the edge, Masculine, Detailed, Chicspecialized设计元素C. Naturalism（自然主义） Thedesignemotionallyapproachedtotheexhaustedmodernpeoplebyaddingcomfortableandwarmambiancefromnatureandmodernframeofcontemporary.Soft,Friendly,Well-beingEffectShapeMaterialColormeaningful& ecosoft, relax,eco friendly, daily life, warm, natural, wellnessnaturalism设计元素1.基本用户体验概念介绍2.企业中一般的用户体验流程是怎样的？3.实例说明(偏GUI方面）4.一些评价原则&标准的探讨(偏GUI方面）当茫茫的一片作品墙出现在我们眼前，我们是否能挑出最好的作品？一件好的GUI作品应具有怎样的优秀特征？在公众投票+专家评审中过滤出来的作品中，能否找到一些评价标准和规律（评价好作品的规律）。来看看专业人士是怎样评价这些获奖作品的？http:/cn.ui.vmall.com/forum.php?mod=viewthread&tid=33505当我们单一的看单纯的GUI作品时，我们更像是在欣赏一件纯粹的艺术作品。它符合基本的美的规律一、一致性：各构成要素保持高度的一致性，色彩单一，给人以秩序感。画面：阅兵仪仗队等二、对称与均衡对称：以一条线为中轴，左右（或上下）两侧均等。画面：故宫全景、艾菲尔铁塔、凯旋门等审美特征：庄重、稳定、可靠；但静止、生硬、单调、呆板。均衡：组成整体的两个部分在形体、色彩、质地诸方面大致相等。画面：盆景五针松审美特征：动中有静，单一与丰富并存。三、比例与尺度：比例：是对象各部分之间，各部分与整体之间的大小关系，以及个部分与细部之间的比较关系。以黄金分割比例为标准设计的希腊雅典女神庙、巴黎圣母院、艾菲尔铁塔等分析比例美及其在不同时代的变化。尺度：是对象的整体或局部与人的生理或人所习见的某种特定标准之间的大小关系。物体与人相适应的程度，是在长期的实践经验积累的基础上形成的。有尺度感的事物，具有使用合理，与人的生理感觉和谐，与使用环境协调的特点。画面：人民英雄记念碑和淮海战役烈士纪念塔对比四、节奏与韵律一、节奏：是一种条理性、重复性、连续性的律动形式，反映了条理美、秩序美。节奏的特征：即形式诸成分和这些成分之间的间隔的重复。（重复的类型：静态重复和动态重复）二、韵律及其形式韵律：以在节奏为前提，有规律的重复，有组织的变化，倾注情调于节奏之中，使节奏强弱起伏、悠扬、缓急。韵律的形式连续韵律：一种或几种组成部分连续重复的排列而产生的一种韵律。渐变韵律：连续重复部分在某一方面作有规则的逐渐增减所产生的韵律。交错韵律：组成部分作有规律纵横穿插或交错而产生的韵律。起伏韵律：组成部分作有规律的增减而产生的韵律，动感强烈。意境+表现+风格当我们单一的看单纯的GUI作品时，我们更像是在欣赏一件纯粹的艺术作品。意境+表现+风格它符合基本的美的规律五、对比和调和对比和调和是在要素间强调异性和共性，以达到变化和统一的形式法则。对比：是取得变化的手段，通过强调差异性，突出个性，以达到生动的艺术效果。调和：是取得统一的手段，通过强调共性，加强同质要素间的联系，使对象获得和谐统一的艺术效果。对比与调和的种类：线、形、体、色、质、方向、虚实、繁简对比与调和。动画：(1)各种线、面、体的对比与调和(2)彩的色相、明度、纯度、冷暖、面积及其综合对比与调和。(3)不同质地对比与调和。(4)不同方向的对比与调和。一致性对称比例节奏韵律对比和谐上面的原理往往用来解决界面元素版面设计问题色彩+风格+造型+质感设计元素的解构理解，也是一种认识方法色彩+风格+造型+质感所有设计围绕故事展开这个故事是设计的灵魂,做有源头的设计故事从哪里来？故事如何开展？常用的头脑风暴法、Moodboard、用户研究方法、趋势分析、质量分析工具可以提供概念源头方法论支持。XXX故事“细节”决定成败！当用户体验设计思想深入人心，从业人员技能水平整体提高。业界已从过往拼功能实现，逐渐转变为拼细节，以及应对细节的执行力。没有细节的设计不算好设计；细节照顾包含GUI+UI+开发的合力！注意基因的继承性漂亮的作品全部有细节的漂亮作品是前提单纯的GUI艺术的GUI个性的GUI传统的时尚的聚焦商业成功的GUI设计商业目标？用户目标？实现途径？符合基本的美学规律好看易用有用易学问题的分析&解决能力GUI设计师的图形表现能力科技感的未来怀旧商业漏斗图形语言使用准确识别性一致性家族化的系统语言条理性内容组织有条理简单没有人喜欢复杂的东西贴心照顾友好的响应和照顾好看的图形（美感）好看的同时还需要友好的传递信息界面信息(功用）能完整的反应UI逻辑意图,兼顾可实现性UI逻辑思想与商业目标契合与业务契合A.以满足功能为目的的GUIB.信息传递准确的GUIC.好看好用的GUID.有独立概念语言，满足用户期望E.高于用户期望,实现商业价值业界平均值不可接受值挑战目标ADBCE？你不是视觉设计师而是整体解决方案的提出者是有价值生活方式（哲学）的倡导者是有真实情怀的自然人Thanks