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

《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计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

相关推荐

  • 广告与用户体验只能二选一?

    最近公司的移动端产品在优化广告投放,其中也遇到了不少的困惑,我翻看了部分APP的广告展现形式并结合了几位设计师&产品经理的想法之后,整理总结出了这篇文章。本文将结合实际案例就常见的广告形式以及它们如何合适地呈现与大家进行分享。遇到的困惑我们知道无论是自身的品牌活动宣传还是第三方的商业广告都能为公司和产品带来不小的收益,但与此同时不恰当的广告也会对用户体验造成很大的影响,特别是移动端,因为屏幕有限更是“寸土寸金”,一不小心就会引起用户反感...

    2018-04-04
  • 报名最后12小时|6周快速玩转axure,同时提升产品和交互

    众所周知,Axure是产品经理必备的工作软件。薪资越高的产品经理(比如月薪18k+以上的产品经理),不仅能高效玩Axure,更能用Axure体现产品思维。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期报名最后12小时!从第1期到现在,2000多位同学学习成长,好评如潮。来看看同学们的成长。下图是0基础同学,学习后制作的“冲顶大会”高保真原型(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文末)...

    2018-04-11
  • 《王者荣耀》的操作交互设计研究

    《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

    2018-02-26
  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30
  • 【软件安装】Axure RP 7.0软件图文安装教程

    1、会员覆盖工作、学习、生活娱乐,并不断更新更多有价值的精品软件2、安装中有任何问题请咨询小白资料网私人微信:xbzw88888888【特别推荐】加小白官方微信:xbzw88888888,就可免费领取:快速入门自学视频课程Axure RP 7.0软件图文安装教程软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的...

    2018-03-13
  • Axure RP 8 入门手册 – 第7章

    第7章母版管理第1节母版简介第2节添加/编辑/删除第3节添加母版到页面中第4节从页面中移除母版第5节拖放行为第6节自定义触发事件第7章母版管理第1节母版简介圆儿:小楼欧巴!小楼:圆圆好!圆儿:老师,我就一个圆!小楼:可是我喜欢两个圆啊!圆儿:老师…你正经一点儿好不好嘛!小楼:呃……你想问什么?圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改...

    2018-04-25
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • ​ 不尊重用户体验如何“携程”丨每日时评

    高考作文干货/素材/知识/热点如果你想要作文素材、资料...加我微信:13261345736备注下你想要解决的问题点播时间(今天的歌单车是@光芒点播给大家的,如果你也想点歌,请留言:歌名+歌手~)当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放单车陈奕迅 - Shall We Dance? Shall We Talk!作文君说昨天刚和同学们说完OTA(在线旅行社)网站搭售的问题,今天我们再来具体看看,携程在用户体验上面临的问题...

    微信热点 2018-02-10
  • Axure学习笔记 | 初识Axure

    本文结构:辰安笔记—01—说点题外话唠叨之语:这个是我在B站上看学习视频自己整理的笔记。话说我的学习笔记基本上是从视频上扒下来,然后加入一些自己的思考。我在规划做分享Axure的时候也想过,网上资源那么多,我做这个有必要吗?有用吗?思考一番,做这件事情虽然艰苦,费力不讨好,但是有收益。我现在就是把自己当作一个产品来打造。通过这些事情有以下收益:1.对自己来说,知识更加系统,当然也可能会让我更加僵化,这个我会注意;2.对招聘者来说,TA可...

    2018-04-29
  • 交互设计,应该从哪学起?

    交互设计行业感觉很火嘛,我也很有兴趣,甚至想转型做交互设计,需要具备什么条件吗?什么职业都可以转型做交互设计吗?网络上很多培训内容都太宽泛,我到底该学什么呢?想职业转型,想拿到高薪,想提升生活品质,如果只是停留在“想”,永远都不会获得成功。不如从今天、从此刻开始,开启你的交互设计之路,从职业规划到求职面试,本课程带你走上职场进阶的坦途。课程139课时,超过1500分钟,800MB课程资料,全面讲解交互设计知识!商业实战案例,1年私人顾问...

    2018-01-30