原型设计

目录 一、项目概述 1.1 项目背景 1.2 编写目的 1.3 项目文档 1.4 项目源码 1.5 项目成果 二、个人工作总结 1.1 工作概览 1.1.1 作为项目组组长 1.1.2 作为项目组成员 1.2 工作详述 1.2.1 选择前端技术路线 1.2.2 确立前端界面风格 1.2.3 绘制界面原型 1.2.4 编写前端框架代码 1.2.5 实现播放器功能 1.2.6 履行组长职责 三、项目总结 3.1 项目立意 3.2 技术路线 3.2.1 整体技术路线 3.2.2 前端技术路线 3.2.3 后端技术路线 3.3 实现情况 3.4 项目收获 四、课程建议 一、项目概述 1.1 项目背景 音乐是一门艺术，是由有组织的乐音来表达人们情感、反映人类现实生活情感的艺术。现代科技的发展使得人们可以利用网络随时随地的享受音乐，然而在当今互联网却很少有一个以音乐为媒介的社交平台。本开发团队想以“音乐+社交”的形式，开发一款集听歌、交友和讨论为一体的网上社区——“Violet”音乐社区。Violet多指紫罗兰，也可形容羞怯的人，本团队旨在通过此平台增强人们对音乐的交流，同时拉近人与人之间的距离。 1.2 编写目的 此文档为本人作为该项目成员的个人工作总结，用于记录在开发过程中的经验、感悟以及对该课程的意见和建议，望今后的其他项目能以此为鉴。 1.3 项目文档

创业公司往往意味着活力、惊喜，其别开生面的商业运营模式和独具风格的产品服务，都是其在市场中立足的根本。而创业公司的网站，则是凝聚公司产品、形象、企业文化和核心价值的橱窗，也是承载公司业务和运营的基础平台。对于初创公司来说，往往只有一次给用户留下印象的机会，网站作为公司的窗口，需要尽全力把握每次机会。 优秀的创业公司会在设计上保持极高的重视，呈现出高度个性化，每个元素都一丝不苟。这里我们来盘点2018年最令人瞩目的创业公司的网站，看看他们是如果抓住你的注意力的。 1、Hotel Tonight Hotel Tonight 是一个预订当天酒店房间的工具。着陆页的独有设计，使得网页有种独立的网页开发者们的作品风。这些图片的排版和处理有着极为清晰的处理思路，搭配好了会让你有一种探索感。并且页面运用了全局的视差滚动，呈现出颇有特色的布局。 2、Cruise Cruise构建了属于他们自己的高速公路自动驾驶系统，帮助用户驾驶汽车。这套系统包含了一组传感器和先进的机器视觉技术，让用户的车辆在行驶过程中可以和其他车辆保持安全距离，目前仅仅可以在美国加州使用。网站采用了时下热门的全屏视频，迎合了设计的大趋势，让用户第一眼就能直观感受到产品的特色。 3、Blockscore BlockScore是一个身份验证服务网站，用于解决身份盗窃的问题。网站设计同样使用了城市的俯瞰图，配合白色的文字和图标

一场说走就走的旅行少不了一家精挑细选的酒店。出门在外，没有一个舒适的住处，恐怕旅行的记忆也并不是那么美好。大牌酒店住不起，小众酒店性价比高，但哪家最合适？网上攻略必不可少。 作为主观性非常强的视觉性动物，选择酒店的时候除了看价格，当然也会更看重酒店的网页设计风格。如果酒店的网站设计都乱糟糟，那酒店自身可想而知。作为提升酒店形象的门户，酒店网站设计一定不能马虎。 如何设计具有现代感的酒店网站？个人分析可以从以下几点要素出发： 1. 响应式设计：网站必须支持跨设备浏览。 2. 卓越的用户体验：简化的网站浏览流程可以带来很好的用户体验。因为如果难以找到常见的页面或到达预订页面完成购买，很可能就会导致用户的流失。 3. 讲故事：你的网站是否了解一旦客人入住酒店会怎样？它是否可以为接下来的行程做指引？ 4. 便捷预定：尽可能简化预订过程以获得最大回报。繁琐的用户信息和付款信息填写都有可能造成用户的流失。 5. 视觉逼真：最好和最有效的网站是吸引访问者花时间探索的网站。专业摄影和视频都是讲故事的绝佳媒介，尤其是对于酒店和度假村。 9款优秀的小众酒店网站设计 1. 赤坂觉醒酒店 酒店所在地：日本 网站设计特色：动态天气图标 ，酒店内部背景图 Hotel Risveglio Akasaka酒店是一家2015年开业的酒店，据住过的用户反馈是一家处处体现设计感的酒店

工欲善其事必先利其器。天天和产品打交道，无可避免的要做一些页面原型，当然也离不开各种工具。好的原型工具软件可以大大提高工作效率，但是每款工具各有优劣。之前写过一篇基于不同平台的原型工具介绍，分别是基于网页、基于桌面端、和原型手机预览APP. 为了更好的帮助大家做出正确的判断，少走弯路，今天我分别为大家介绍一下几款常用软件的产品特色。 1. Axure RP 尽管近年来各种原型工具层出不穷，且功能及使用性方面也在不断的发展，但Axure仍旧是原型设计工具中的佼佼者，稳坐大牛之位。可以说Axure是Windows上一款非常出色的原型设计软件，亦是网络产品前期设计的首选工具之一。 价格： 前期提供30天试用，试用期结束后需购买。 专业版 $495一个注册码 团队版 $895一个注册码 企业版$99/月 产品特色： 1、老牌原型工具，用户群体庞大 2、丰富的视频教程 3、自带组件库，以及强大的第三方组件库 4、强大的交互功能 5、完整的教程和支持文档 预览： 预览方式既可以支持直接F5在线预览，也可以通过移动端预览： 导出HTML,在Safari中打开 通过Axure share直接打开桌面端上传的项目 导出： 支持导出文件类型：HTML, DOCX, PNG 2. Mockplus 作为新兴的快速原型设计工具， Mockplus提供了大量组件和图标，方便用户快速上手进行设计

前言 什么是原型呢？ 原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。 简单说，“原型”是在项目前期阶段的重要设计步骤，主要以发现新想法和检验设计为目的，重点在于直观体现产品 主要界面 风格以及结构、并展示主要功能模块以及之间相互关系，不断确认模糊部分，为后期的视觉设计和代码编写提供准确的产品信息 使用人群 原型设计的使用者主要包括商业分析师、信息架构师、可用性专家、 产品经理 、IT咨询师、用户体验设计师、 交互设计师 、界面设计师、架构师、程序开发工程师等 使用目的 用例阐释者，用来了解用例的用户界面； 系统分析人员，用来了解用户界面如何影响系统分析； 设计员，用来了解用户界面如何施加影响及它对系统“内部”的要求； 常用快速原型设计工具 Axure RP、Balsamiq Mockup、Pencil Project、Pencil Project、Prototype Composer、Omni Graffle、GUI Design Studio（GDS）、Office组件，这里我们使用的是Axure RP Axure RP工具简介 Axure RP是一个快速绘制Wireframe和Prototyping的工具，主要用来定义

纸上原型设计，作为传统的原型设计方式，简单快速，成本低廉，为大部分设计师所喜爱。而桌面原型工具设计，作为伴随电脑科技发展而出现的原型设计方式，快速全面，高效保真，动效灵敏，专业优质，一经推出，就备受青睐，迅速在设计师群体之中普及。但作为网页或移动端应用UX/UI设计的你，更喜欢或更愿意使用他们中的哪一种来完成你的UX/UI设计呢？为方便大家选择，这里分别为设计师朋友们介绍两种原型设计方式的优缺点，希望对大家有所帮助： 首先，什么是纸上原型设计？ 一般而言，纸上原型设计指的是UX/UI设计师们广泛采用的一种通过纸，笔，剪刀，便利贴之类办公用具来展示出设计理念的一种设计方式。换句话说，就是设计师们在纸上绘制出各种网页或手机端应用部件，（例如软件界面，按钮和各组件之类）完成原型设计，并检测其设计理念是否可行且适用的的一个过程。所以，从这当面而言，它也是设计师们创建原型，尽快获得真是用户或设计师关于设计实用性反馈的重要方式之一。 什么是桌面原型工工具设计？ 而不同于纸上原型设计，桌面原型工具设计是一种基于桌面原型工具，实现网页或移动端软件应用原型设计的设计方式。而桌面原型工具是一种能够安装在电脑桌面上，帮助UX/UI 设计师独自或以团队协作的方式创建和提升应用原型设计的设计工具。而且，通过优秀原型设计工具制作的软件原型一般细节详尽，交互灵敏且转化多样，能够更加全面的展现软件真实的界面和交互

墨刀原型链接 ：https://pan.baidu.com/s/1qrVI_je8NONVHT_FwH6Pwg UML设计链接 （附带第一次会议总结）：https://www.cnblogs.com/lfxy/p/11885545.html 需求文档链接 ：https://www.cnblogs.com/lfxy/p/11788767.html 一、个人定位 在这次项目中，我的定位类似于产品经理师 承包设计师与美工的部分，做出ui的平面设计与素材收集及制作 确认接口，衔接设计与程序还有需求 确认软件需求，设计软件ui平面设计，设计软件使用流程 后期帮助其他组员编写页面 为写好的功能的页面进行排版 二、个人分工 (一) 素材收集及制作及文档编写 一个app需要足够的图标，logo，以及图库，而我负责这些素材的准备 1) Logo，加载页面，登陆界面图片的制作 2) 图标与图片的收集、与整理 3) 素材制作及收集阶段总结 我总觉得，很多人在轻视这个阶段和过程。但我觉得素材准备和收集还有整理和分类是一个极为重要的步骤。当你有一个充分的准备时，你将会有很多好处 i. 后期的测试会变得十分简单，图片可以十分容易的从你想要的文件夹取出，大小也是你想要的，裁剪好的大小。而如果前期不做准备，后面的测试会很难进展 ii. 会让后续步骤变得更流畅，相较于一边做一边设计，我更加认同设计好了

我们在日常的软件设计中经常会涉及到原型的设计。设计一个原型，无非就是三个目的：第一个目的是给自己看的，为了方便之后的下一步设计；第二个目的是给开发看，说服开发，完善软件；第三个目的是给客户看，让客户满意，推动合作。 但是，在工作中经常有些小白同学拿着应当给开发看的原型去给客户看，导致客户不满意，谈判过程异常艰难；也有一部分人拿着应该给客户看的东西去找开发，结果却效率低下，有的会被开发拒绝，部分情况可能导致更严重的沟通问题。更有甚者拿着该给自己看的东西去给开发和客户看，后果请自行脑补。那么，究竟该用什么工具做什么原型给谁看？今天熊先生就来跟大家简单讨论一下，在目标明确的情况下，我们到底该怎么办。 一、给自己看 重点：草图 工具：白板、纸笔、 Balsamiq 、 Xmind 既然是给自己看的，那就没什么多说的了，随心所欲的记录下一切可能的想法，保证自己能看得懂，也就足够了。这个阶段里，外界的干扰越少越好。简单方便的纸笔和白板就成了最好不过的工具，它们不会限制你的思维，任你想出无数想法。如果你希望把这些线框图更有效的整理出来，可以使用Balsamiq，这款工具虽然没有交互设置，但是其素描的风格相信也会为一些用户提供灵感的来源。而且Balsamiq作为原型设计工具，组件虽然不是很多，但也完全可以满足线框图的要求了。当然，有些时候为了整理自己的头绪

如今是一个快节奏的社会，每一天都会有无数的软件发布，每一款软件的制作过程不可避免的需要使用原型设计工具。而 MockPlus 就是一款原型设计软件，可以用于移动端，PC端以及WEB的原型设计。它也符合如今快速设计的潮流，旨在帮助设计师在最短时间内设计出令人满意的软件原型。 现在市面上有很多的原型设计软件，而为什么选择 MockPlus 呢？我是因为它快速且高效，简单而不简陋的特点，专注于原型设计这件事本身的理念。如果把原型设计软件中的巨头Axure比作是一个武学宗师，那么MockPlus就是一个刺客，它远没有宗师那样华丽的招式，更没有宗师那样威力无穷且见于细微的内力。它只是一个刺客，它的招式不多，出手很快，每一招一式都是为了获得一个成功的结果。这就是MockPlus,它简单，没有太多繁复的操作，几乎每个人都可以轻易的上手；它快速，可以通过简单的拖拽设置等操作来实现其中大部分的功能。 MockPlus提供了很多的基础组件，交互组件，布局组件等常用的组件。而对于这些组件的使用也都是很简单的，每一个组件及其中的事件都会提供一个链接点，而通过链接点链接到其他的页面或者组件上就可以实现事件的功能或者页面的跳转，可以很方便的进行软件的交互设计。同时软件界面的右下方也会提供每个组件的属性，通过这些属性可以快速的设计出自己想要的组建模式。布局，页链接的属性可以很方便的对进行设计。

原型设计是软件设计开发过程中必不可少的一部分，但是现在我们能够看到的原型设计工具种类多到让人眼花缭乱。如果你只是选择了其中的一款工具，并且觉得原型设计工具只需要一个，对于整个设计开发过程就足够了，那你就大错特错了。事实上，这些原型设计工具连接起来，才是一个完整的设计流程。 草图/线框图阶段：纸笔、白板、Balsamiq、 Mockplus 无论是美术设计还是用户体验设计，或者是用户界面设计，首先要做的事情就是画草图、打草稿。当我们天马行空的进行想象的时候，记录的工作交给它们就好了。纸笔和白板不用多说，千百年来老祖宗留下的好东西为我们解决了太多的记录问题。Balsamiq、Mockplus以及其他的可以产生线框图的工具是新世纪科技带给设计师们的福音。Balsamiq作为一款静态的线框图工具凭借素描的风格收复了不少用户。虽然近几年版本之间的改动并不是很大，但仍然有着坚实的用户基础。Mockplus作为行业新秀，不仅传承了素描风格，同时加入了写实的线框图，满足更多人的需求。 交互设计阶段：Axure、Justinmind、 Mockplus 、UXPin 线框图的设计告一段落，下一步就是为它们添加交互动作。交互，作为程序运行中影响用户体验的关键因素，一点也马虎不得。产业初期并没有专业设计师的时候，很多程序员同事担当起了原型设计的重任，也正是因为如此