网页策划与评估-课件

网站策划与评估

—从工程学角度看待Web设计PlanningDesignDevelopmentPublishingMaintenance网站策划的环节

——生存期2023/7/20网站策划与制作流程策划须知网页构架图形制作程序编制建立文字內容建立多媒体资料网站管理网站行销2023/7/20策划须知网站的构架等同于行销活动、人力、经费、消费群市场与商品消费：网站分析推动策划2023/7/20网页架构•网站构架图•符合策划面的事务•考虑程序网页的操作过程•考虑使用者操作习惯•与美编、程序讨论可行性•修正策划案并订出时程表2023/7/20图形制作参考相似网站收集必要素材统一网页风格配合程序调整2023/7/20程序制作可依据策划独立制作与美编部分同时进行配合美编修正网页随时协调更改网页2023/7/20其他建立文字资料建立多媒体资料网站管理网站行销2023/7/20网站策划环节（2）执行（implementation）设计（design）建构（architecture）定义（definition）2023/7/20网站策划与制作流程（2）烩办だ猂定义建构设计执行格式化的评估FormativeEvaluation界面设计InterfaceDesign转换协议ConversionProtocol原型产品Prototyping故事板Storyboard运行行为RuntimeBehavior表示设计PresentationDesign关联性设计InteractivityDesign身份（特性）与信息设计Identity&InformationDesign主题分析SubjectAnalysis硬件选择Hardware领域分析DomainAnalysis软件选择Software2023/7/20主题分析使用者分析策略內容开发工具与科技日程安排2023/7/20使用者分析确立目标确定受众2023/7/20策略定义要在网站中传达的信息;策划如何让网站的使用者接受所要传达的信息基调的选择;选择一种能够有效地表达目的的视觉或者语言方式.2023/7/20内容确定信息内容利用独特的方式、恰当的Web技术规划信息网站的设计一定要适合多数用户的欣赏能力2023/7/20开发工具与技术审视下列工具（技术）的优缺点(举例)HTMLCSSFramesScriptingLanguages(CGI,VB,etc.)JavaAppletsPHP/ASP．．．2023/7/20日程安排进度时间轴2023/7/20领域分析根据不同的网站要求，搜集信息。对不同素材与信息加以分类整理。针对各细项，拟定呈现内容与策略。详列制作上所需的技巧。2023/7/20选择硬件与软件以下提供一软硬件环境的范例，策划目标为开发影像数据库系统。系统开发工具操作系统--Windows2019ServerWebServer–IIS6.0JavaServlet&JSP--Resin-2.0.1&JDK1.3.1数据库MicrosoftAccess2000SQLServer20002023/7/20选择硬件与软件影音处理Premiere6.0RealProducer8.0系统使用环境WebBrowser--IE,FirefoxCPU–2.0GHz或以上RAM–1GMB或以上2023/7/20设计流程2023/7/20故事底板稿范例

（设计）大概描述页面的长相2023/7/20原型原型是正式产品推出前，大致完成的作品，很多应用程序有所谓的Beta版，意义和原型很像。就网站而言，如果你帮某系设计网站，当初步设计完成后，就要进入一连串的测试与评估，此时便是原型，在确认所有问题都修正后才正式上线。2023/7/20评估发展中评估格式化评估通常是专家评估或是小范围调查测试推出后评估综合评价线上回馈或大规模调查等2023/7/20网站设计的宗派AndrewChak–整体哲学观点驱使设计者寻找超出Web之外的解决方案并根据顾客的需求进行设计。•AlanCooper–倡导人性化和个性化的设计。•Davis和Laroche–提倡包容性，鼓励将艺术、结构和内容融合进Web的设计中。•JakobNielsen–这位Web设计传教士藉以参加神圣的设计巡回布道大会分享他的设计理念。•JaredSpool–与一直在寻找但始终未找到诚实人的希腊哲人Diogenes类似，JaredSpool从来没有发现面面俱到的好网站。2023/7/20AndrewChak一个设计者需要看到一个网站的所有竞争对手。竞争不只是来自另一个网站，也来自现实生活。因此，如果网站不优于现实生活的话，人们就不会使用它。Chak的三大设计原则是：快速的页面下载直觉的导览精致简约的设计。2023/7/20AlanCooper一个所谓优良的设计是建立在对广泛的人类共通性和特殊群体的个别意向的深刻理解之上，因此它可以对适当的信息、过程和技术进行排序，从而可以使那些特殊群体达到他们的专业和个人的目的。Cooper的三大设计原则是：精简的设计健全、快速的页面下载无误的除错管理2023/7/20RobertDavis&PaulLaroche真正成功的使用者接口设计是经过深思熟虑并以使用者为中心的系统或经验设计的自然扩展。Davis、Laroche设计原则是：有效（effective）和迷人（sexy）并不互相排斥。要有勇气去重新定义所谓「酷」的含义，将成功（successful）和直觉（intuitive）这两大因素包含进来。2023/7/20JakobNielsen它在您需要考虑的几乎所有因素方面一直都表现得很好。当您在不同的页面上时，您知道您要做什么。一直在改进设计，但是却一直以使用者经验为出发点。Jakob的三大设计原则是：精致简约，越少越好支持使用者任务不要阻碍使用者2023/7/20JaredSpool在设计得最好的网站上浏览时，网友究竟有多少时间能够成功达到他们的目标呢？」根据Spool的观察，答案是42％。根据Spool简单而保守的推算，「所有的网站都是失败的。」Spool的四项设计原则是：–了解网站的目的–了解使用者的目的–确保所刊登的内容能达到目的–确保所刊登的内容能达到目的2023/7/20经验设计先躯为NathanShedroof。经验设计涵盖从美学、互动、价值与意义、品牌、时间、动机、架构、控制、语言、回馈、资料、个人化、商务等不下数十种元素，这些元素都可能影响到设计的结果，是否能真正符合使用者的需求。因此，我们谈网站或网页的设计，从表象上看来似乎是一种艺术、视觉的设计，但如果只着眼艺术与视觉设计的表现，绝对不会是评估一个专业网站规划及设计公司最好的角度。虽然好的网站设计需要经验丰富的设计者，然而经验设计中所谓的「经验」，是指「使用者」的经验，而非网站「设计者」、「拥有者」的经验。也就是说，经验设计的精神就是，站在使用者的角度、观点、心态来设计网站或网页。2023/7/20设计前的研究课题使用者是谁？他们在网站上可能发生的经验是什么？这些经验会在何处发生？在何时发生？为什么会发生这些经验？当这些经验发生时，他们会有哪些问题或想法？2023/7/20经验设计的特色网站或网页的经验设计有一项特色，就是使用者的一切活动，包含感观、动作、心灵都发生在虚拟的空间中。在虚拟的空间中，建立经验最快的方法就是仿真实体的世界，因此如何整合实体与虚拟世界中的空间与活动，弥补虚拟世界相较实体世界的不足之处，并利用虚拟世界优于实体世界之处，则是经验设计时的最大挑战。2023/7/20经验设计七大元素品牌资产（brandasset）信息架构（informationarchitecture）视觉影像（visual）文字风格（editorial）听觉声音（sound）动线规划（structural）网页技术（technology）2023/7/20品牌资产企业识别(CI、VI)、企业文化、企业精神、广告行销等资产，是决定网页设计的基础，例如网页所采用的颜色、基调、技术、图片、图标、文字风格、信息内容等等，都应视企业的品牌为设计的依归。尤其拥有丰富品牌资产的企业，在塑造数字世界的品牌形象时，往往比实体世界更需要斟酌考虑。2023/7/20信息架构内容架构是最接近网站源头的元素，所谓源头是指网站规划阶段包含网站设立的目的与必须达成目标，网站的内容其实是根据这些条件而产生的，产生之后如何以最适合的方式分类、群组，深深地影响后来的浏览接口设计与视觉的呈现。因此每家公司都会有一套Approach，运用有系统性思考与检验方式来建立网站的骨架，之后的文字影像内容就像网站的皮肉一样，能以最美观的姿态出现在它们应该出现的地方，并且被使用者以最快速度找到。2023/7/20视觉影象图片、影像、图标、动画、底图背景、版面规划等是网页设计的灵魂，尤其在强调眼球数(Eyeballs)的网络媒体上，视觉的展现一直是企业、网络使用者与媒体评断网页设计优劣与否的第一道关卡。然而受到网络传输速度的限制，设计网页不像平面那样拥有要求超高解析品质的权利，但也能看出一个设计者的功力。视觉影像的元素通常被主观影响，在经验设计的精神里，一切都应该回归到使用者的立场，最大的判断依据是他们联机的速度与上网的目的。2023/7/20文字风格设计一篇网页或构思一则网络广告时，小从一个按钮的命名，大到一整篇公司简介，都必须靠专业的文案人员来处理，我们称之为WebWriter。虽然图片可以抓住网友的眼，文字却能抓住他们的心。最基本的要求，WebWriter应该懂得善于命名网页的Title，懂得善于命名图形名称，懂得利用动画在Loading时的空隙传达一

些有用的信息。Webwriter要懂得掌握网站的精神，以符合网站精神的语体与文字风格与使用者沟通网站的品牌与个性。2023/7/20听觉声音•网页与平面设计的最大不同，在于网页是一个展现文字、图像、影片与声音等多媒体特色的表现空间，宽频时代的来临，越来越多网站都加入了声音的元素作为提升与使用者沟通的媒介。然而声音元素的应用牵涉到文件格式、长度、品质、合法性与必要性，好的声音效果能为精采的网页设计加分，当然在使用时必须考量使用者的带宽及计算机设备，是否造成不必要的传输负担，是否因为使用者计算机设备的不足而反而变成失之交臂的创意。

2023/7/20动态规划网站的动线规划不如视觉、文字、品牌、内容，是显性的元素，他通常不被看见，却能够被使用者清楚的感受。动线规划可从使用者在网站上从事互动性的活动时被检视。如果你希望网友加入会员或订阅电子报，动线的规划明显的影响他们的结果是否成功，所谓的成功不只完成与否，同时也包括顺畅与否，换言之，他们花费多久的时间完成一项活动。此外，动线的设计也包括不同使用者在网站中进入的途径是否被清楚的标示、友善的引导以及体贴的协助。2023/7/20网页技术前面说过网页是一种多媒体的表现空间，因此在网站或网页设计中如何以多媒体制作技术来呈现需要的效果或目的，例如动态DHTML、Flash、JavaScript、RichMedia、3D、StreamingMedia、VirtualReality….等等，广泛的被运用在浏览系统、接口设计、前导页面、网络广告、网络行销活动、商品展示介绍、下载等目的。这个部分经常会牵涉到两部分的专业，一部份是与前端的页面设计者，一部份是后端的数据库设计者。而这正是经验设计中最困难的部分，因为两方专业人员在设计时侧重的层面、所使用的设计工具、以及沟通的语言有相当大的差异，因此在分头进行到需要整合的阶段，就会产生许多问题与困难，例如进度落后与效果不良。因此，了解经验设计精髓的公司懂得如何整合这两部分专业的人，以最有效率的方式沟通。当然，更重要的是，他们也会懂得如何运用、控制这些技术，以最优异的速度表现，呈现最精采的页面，带给网友最佳使用经验

。2023/7/20四大经验感官经验（lookandfeel）行进经验（entryandmove）活动经验（actionandinteraction）心灵经验（mindandspirit）

2023/7/20感官经验使用者在接触到网页的瞬间，以他的眼睛、耳朵、手指感受一切。感观经验着重于七项元素中的品牌、视觉、听觉、文字、内容，因为这时候使用者对于网站还停留在观察阶段，以所见到网页来决定下一步行进的目标，或审视与自己上网目的相符的标的物。有些使用者会因为视觉设计决定想不想留下来继续浏览，也会看网站提供的内容而选择继续参观或离开。2023/7/20行进经验使用者的感观经验侧重于观察、审视、形成印象、决定最高行动原则，而行进经验侧重于决策行动的目的与方向，例如决定观看进一步信息、参与何种活动、由何处进入，而这样的行进过程可能会经过两个或两个以上的链接，才能抵达目的地，因此行进经验侧重视觉、文字、动线与技术等元素。在行进经验的设计上必须利用网络互联的链接特性，让使用者的行进经验更顺畅，具体的说，就是进入直接、进行容易。2023/7/20活动经验使用者在网站上的活动类型相当多样，活动经验与行进经验的差别在于停留的时间。以旁观者的角度看来，行进与活动都是使用者的动作，但行进经验是经由快速的判断与决策抵达目的地，而活动经验则以完成一项目的或任务，由于完成一项目的或任务必须经过多次的决策、行动、响应、决策的过程，后者所花费的时间通常较前者长。活动经验所侧重的元素为文字、动线、技术，为了节省活动所花费的时间，因此在视觉影像上的元素在此时会尽可能简化以求速度品质的提升。2023/7/20心灵经验行进经验与活动经验因为可以透过观察使用者在使用网站所设计的动线或功能时，是否成功完成，过程是否顺畅无碍而了解，感观经验也还可以询问使用者对于文字、内容、视觉的辨识与了解程度做出评断，心灵经验相较于其它经验是最不容易被观察与描述的。使用者在历经感观的审视、行进的判断、活动的执行种种经验后，到离线或离开网页的时刻，会产生一个整体网络经验的评断，我们称之为心灵经验，而这项经验是必须被发掘的，因为它可能深藏在使用者的心里、短暂地闪过使用者的脑海，如果不加以发掘，除非使用者愿意主动分享，否则不容易留下实际的结果。因此许多网站在设计工作流程中，都会加入一项重要的流程：可用度测试（usabilitytest），这项测试的目观察使用者的使用情形，让他们能够快速正确地完成他们上网的目的。2023/7/20网络可用性根据网页设计大师JakobNielsen（2019）的定义，可用性（usability）是衡量使用者和网站、应用软件等设备互动经验的指针。若以水龙头为例，一个水龙头的可用性包括使用者是否能立刻找出水龙头的使用方式、是否能轻易开启它？2023/7/20系统的优劣两大要素实用性（utility）：该系统是否能提供消费者需要的功能？若提供的功能和消费者的需求无关或者无法解决主要的问题，那么不管它好不好用，都是一个差劲的系统。可用性（usability）：使用者是否会用该系统，能否有效地操作该系统？即便该系统所言不虚，提供令人满意的功能，但若使用者想不出怎么操作，依旧是差劲的系统。2023/7/20可用性五大特色易学习–使用者面对一个完全陌生的系统时，可以在多短的时间内学会基本操作？

记忆力–使用者以前碰过这类系统，日后再接触时，是否对系统有足够的记忆力，帮助他有效完成任务？还是每次都得从头学习一次？

2023/7/20可用性五大特色出错频率与严重性使用者操作错误的频率？以及出错的严重性？使用的效率一旦使用者学会操作后，可在多短时间内完成任务？主观满意度使用者对系统用后的满意度？2023/7/20注意事项所有系统的使用性都具备上述五项特质，因此在设计产品时必须将上述五项特质纳入考虑。有时候，一些特质会重于其它特质，以网络为例，易学习是最重要的一项，因为用户很少在一个网站停留太久。此外，主观满意度也相当重要，因为用户若觉得某个网站不够好，只要轻松在鼠标点一下，就可进入其它网站。相较之下，出错频率就比较轻微，但商务网站仍得小心，确保客户所订购的产品、付款的信用卡号码、邮寄地址正确无误。企业内部网络的设计必须专注于系统的使用效率，因为同一个使用者免不了会重复使用它。企业对外网络的设计必须重视降低出错率，因为常有大笔金额的交易，出错不得。2023/7/20网站可用性问题点选链接很简单，但要知道哪些链接值得点可不容易。网页上的说明常常不清楚，让网友犹如坠入五里雾中，不知道应该点哪里才对。现在网络上互动的技术五花八门，除了传统蓝色的超链接之外，还有Java以及动态HTML，往往让使用者头晕。网络上的导航做得很糟糕，使用者结果会迷失在浩瀚的网络世界里，找不到自己想要的资源。2023/7/20网站可用性问题不论是平面或是旧的媒体格式，网页内容都可以针对这些需求进行最佳化的安排，不过几乎没有什么网页内容能够满足上网者在线上阅读最适化的需求。电子商务交易流程不容易让人了解，而且也不容易完成。许多网页虽然做得相当亮丽，但是金玉其外败絮其内，使用者反而找不到需要的内容，也没有想要的交易项目。网友的整体使用体验相当不理想，尽管某些个别项目还算过得去，但是缓慢的下载过程往往令人退避三舍。2023/7/20使用者测试测试的对象必须具有代表性，能够反映出你目标观众的看法。除非是企业内部网络，你才可以同侪作为测试对象，否则不要用你的同事或是任何了解这项项目的人。不过就算是企业内部网络，也应该避免以项目团队的成员作为测试对象。2023/7/20使用者测试测试的时候，不要只是玩一玩网站接口而已，使用者应该实际执行某些工作：网站上到处点一点当然很简单，真正的考验在于网站是否能够协助使用者解决某些特定的问题。所测试的工作也必须具有代表性。2023/7/20使用者测试避免出面干涉，让测试者自行感受，并且畅所欲言。测试的目的并非展现你有多聪明，也不是要协助使用者加速达成任务，而是希望从使用者解决问题的实际体验当中获得宝贵的意见。使用者从家里或是办公室造访你的网站