【优秀作业展示】交互设计基础(一)

《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计1511高铁取订票界面设计色彩选取字体:冬青黑体字号:18、21、24、28、30、32、36风格:利用从...

      《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。

        接下来就看看学完本课程后同学们的优业。

优秀学生作业

第一期


周亦辂

产品设计151

1

高铁取订票界面设计


色彩选取

【优秀作业展示】交互设计基础(一)


字体:冬青黑体

字号:18、21、24、28、30、32、36

风格:利用从左向右的统一渐变体现速度感


【优秀作业展示】交互设计基础(一)

购票和取票去掉了图标,使信息直观


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

等待界面用小火车跑山,增添趣味性


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

票型整体变成圆角矩形,且显示了座位号,图为选中状态,已有填色提示用户此区域都可用来点击


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

打勾符号让用户不用看字就明白打印成功。添加了出站口和剩余时间的提示性信息且加大加粗,能让用户一眼捕捉到


【优秀作业展示】交互设计基础(一)

首先,流程提示位于上方,且有箭头提示。选地点用首字母,提示在待选框内,直观又不占空间,右边自动显示热门城市


【优秀作业展示】交互设计基础(一)

图为选中GZ状态下 ,右边显示对应城市,上方框内字母显示能表明两个首字母的顺序

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

上方流程条上的信息实时更新,更便于用户捕捉信息


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

选择车次时先选择车型和发车时间短来进行筛选,打散了多量级的信息,使后面步骤更加容易


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

选车次,时间是最重要的信息,因此加大加粗,放在首位,地点,车次都是不重要的信息,故尽量缩小。同时中间时间我也有显示,用以给有需求的用户。显示票型余量,不会做无用功。

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

“我认为选择座型时要考虑的一个很大的因素就是乘车时间。因此我把此信息放置在上。”

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

去掉之前是或否的模型,直接用打印按钮


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

2

智慧医疗


色彩选取


【优秀作业展示】交互设计基础(一)

字体:冬青黑体

字号:18、21、24、28、30、32

风格:利用微弱的渐变和弱高光弱阴影体现质感


【优秀作业展示】交互设计基础(一)

“主界面中,主级信息中我把充值结算流程合并了,上方是挂号取号并列的两个流程,下方是充值结算和预约挂号。次级信息我认为是时间,因此将之放大放在屏幕右上角。最次级信息是市民卡智慧医疗服务平台,我将之放在了屏幕底端。配色上太过鲜艳的颜色有攻击性而沉闷的颜色也不适合本来身体就不舒服的用户,因此我选取了温和但又不失活力的颜色。”


【优秀作业展示】交互设计基础(一)

“因为医院有特设的发热门诊,热度达到38度以上是不需要走普通挂号流程的,一般医院只在门口竖牌提示,会导致用户直接挂号去内科就诊,因此我在在此闭合流程的一开始增加了这么一条。

最终版我把原本的圆角矩形改成了对话框的样子,增强了询问的柔和度,给用户一种被关怀的感觉。”


【优秀作业展示】交互设计基础(一)

这一页面把倒数秒数减少至3秒,关键信息“3号楼”加重突出


【优秀作业展示】交互设计基础(一)

如已插卡,请勿拔卡的提示加重


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

当时时间已过上午时间段,因此上午时间段灰掉。此处返回按钮是直接返回首页

【优秀作业展示】交互设计基础(一)

“此页,我在科室选择基础上,增加了智能导视按钮,但由于信息过于混杂,故区分到二级界面。”


【优秀作业展示】交互设计基础(一)

智能导视,因为不清楚市民卡读取能不能调出性别数据,故加了性别转换按钮和正反面切换。选中状态下,身体部位变灰,右边出现推荐科室


【优秀作业展示】交互设计基础(一)

男生版本


【优秀作业展示】交互设计基础(一)

然后是选择号次,因为没有确认键故取消首个默认。已选的号子作为次级信息灰掉。左边的普通和专家是大分类,可以分开选取查看号次情况


【优秀作业展示】交互设计基础(一)

“若选择专家号,则出现选择医生,一般专家较少,故把每个选项放大。另外我舍弃了放医生的照片而用卡通图像来表示,只传达最重要的信息,即医生的性别。”


【优秀作业展示】交互设计基础(一)

进入专家界面后可选择号次


【优秀作业展示】交互设计基础(一)

确认页,把确认按钮的形状改成一样的圆角矩形,减低形状认知难度,挂号费用提示是医保减免后,以免用户产生疑问


【优秀作业展示】交互设计基础(一)

余额不足的情况下,直接跳到充值流程,不然又要重新来过


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

充值结束后选择挂号


【优秀作业展示】交互设计基础(一)

用等待时间告知用户科室位置


【优秀作业展示】交互设计基础(一)

最终成功界面,提示取走凭条,信息加重。再提示科室位置和就诊时间,最后祝愿用户身体健康


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

进入界面,显示待结算金额和余额,如果待结算金额为零或者卡内余额不足115元时,结算按钮为待激活状态,只能选择充值


【优秀作业展示】交互设计基础(一)

充值金额默认结算的差额,蓝色框为常用金额


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

这边充值完可以直接结算也可以放弃


【优秀作业展示】交互设计基础(一)

结算清单,因药单一般人不会看也不太看得懂,但有可能出现敏感词汇,故缩小了处方和科室信息,加强隐私保护


【优秀作业展示】交互设计基础(一)

结算成功后还可以继续充值


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

预约先选择日期,我在他原基础上加了星期几,且提示了明后天,使信息更直观


【优秀作业展示】交互设计基础(一)

跟挂号不同,加了预约日期的提示


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

添加了就诊日期


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

提示信息改为就诊日期和就诊时间

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

因调查后得知一个人最多一天能预约两个号,因此采用了这种信息结构


【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

【优秀作业展示】交互设计基础(一)

最终成功界面,提示取走凭条,信息加重。再提示科室位置和就诊时间,最后祝愿用户身体健康


       

        第一期的优秀学生作业就展示到这里了,后面会陆续推出不同的优秀学生作业,敬请期待。。。

【优秀作业展示】交互设计基础(一)

欢迎订阅公众号

时刻参与浙科院工业设计系的精彩动向

:)

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36250/

(0)
交互精选交互精选
上一篇 2018-04-04
下一篇 2018-04-04

相关推荐

  • 邀你参与丨2018中国用户体验行业调研

    什么是用户体验设计?往小了说,它包括视觉设计、交互设计、用户研究等,宽泛一点讲,产品、文案、服务流程的设计也是用户体验的一部分。用户体验不是一个独立的岗位,它应该是整个团队的一种思考维度。而在其中,你又扮演着什么样的角色呢?在行业中你的专业能力和知识储备在什么层次?用户体验行业的未来,将会往何处发展?自2013年以来,IXDC已连续开展了5次用户体验行业调研,回收了上万份从业人员的反馈,并总结出调研报告,以全局角度俯瞰,了解行业现状与存...

    2018-04-19
  • Axure 从入门到够用

    第180篇Glen几个月前决定总结分享一个Axure教程系列,结果现在才腾出时间来梳理。Axure是最常见的产品原型工具了,看完这篇文章,你就基本具备了日常工作需要的产品原型能力了。Axure入门到够用教程1. 尺寸规范1.1 网页端产品尺寸优秀的产品原型是需要做到像素级高保真的,这样便于之后设计师输出设计图,毕竟眼见为实嘛。现在互联网主流屏幕分辨率有1920 * 1080、1366 * 768、1440 * 900。你在画网页产品原型...

    2018-03-06
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02
  • 交互设计|康石石浅谈如何创作一本打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,康石石为大家带来此文,分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计作品集创作,康石石首先向大家强调几点:1.交互设计不仅仅是网页和APP现代交互设计从某种程度上来说虽然和网页与平面设计的联系从发展的时间上看联系较为接近,然而交互设计并不是一个单纯研究电子产品用户界面...

    2018-02-03
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08
  • 交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、Jakob Nielsen(雅各布·尼尔森)简介:Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术...

    2018-01-31
  • B2B、企业SaaS中的交互设计总结

    [图片]熊猫设计院关注熊猫设计院发现更多设计好文[图片]译者 / 不器校对 / 熊猫小生作者 / Varun Mohapatra[图片]我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇

    微信热点 2018-04-18
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 【软件资源】Axure RP 8.0软件安装教程——附下载地址

    本次给大家提供Axure RP8.0软件破解版,整个破解过程非常简单。软件适合32,64位的操作系统,破解文件下载地址在文末,请查看!软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装步骤:1、选择下载的软件压缩包,鼠标右击选择解压...

    2018-03-24
  • 用户体验(UX)专家是如何进行设计评审?

    设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。本文摘自https://www.nngroup.com/articles/ux-expert-reviews/原文标题:UX Expert Reviews原文作者:Aurora Harley什么是“设计评审”?定义:设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。“设计评审”一词颇为广义,涉及数种可用性测查方法,且每一种的运用因人(评审员...

    2018-04-19