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

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

    沃尔沃自主驾驶的概念交互设计来自设计师Keke Le用户调研 |  HMI设计 |  UE/UI设计 |  HMI培训  |  HMI评测  | 体验咨询

    2018-03-21
  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 交互设计套路之——导航设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Five Hundred MilesThe Shadows - Dance With The Shadows/The Sound Of The Shadows亲爱的小伙伴们好久不见啦你们的涂涂回来啦!!不知是时间太快还是指缝太粗总是留都留不住总之感谢小伙伴们的不离不弃话不多说赶快准备好小板凳和瓜子嗑着瓜子咱们就开聊吧下面开始分享app的套路之一导航设计一、导航的分类1.标签式导航...

    2018-02-11
  • 交互设计申请竞争白热化,你该如何“杀出重围”?

    只要你想改变自己汉艺陪你死磕到底对于学习交互设计的同学来说,多数同学的作品集项目最终效果是这样的:这样的一个网页,几个app界面的最终效果图在各大设计网站,更是一抓一大把,导致很多同学对于交互设计的认知更多的停留在网页设计或者app设计上,浏览越多案例,思维越被局限。如果一个交互作品集中四五个项目全是这样的“大众脸”,想要从全球大量相似的“竞品”中脱颖而出,吸引到考官注意力,可以说困难重重。本期文章,为了让大家的作品集能够在全球竞争中脱...

    2018-02-03
  • 同学进了大公司的UED部门,我想一部分原因是…

    2017年开年,已经陆续有毕业生提前找实习工作了,在与一位成功入职的新人设计师交谈中,有一个重要发现:交互设计越来越受重视了。这位计算机专业的小伙伴,机缘巧合接触了设计,从此一发不可收拾,短短不到一年时间就熟练掌握了PS、AI、AE等软件,还自学了手绘技能。不过即使如此,她的求职仍困难重重。不是985 重点大学/非视觉传达专业/只会画图标界面等等,都成为用人单位将她拒之门外的理由。虽然要求有点苛刻,但站在公司的角度,想要在浩浩荡荡的求职...

    2018-01-31