交互学堂
专注分享专业知识

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

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

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

优秀学生作业

第一期


周亦辂

产品设计151

1

高铁取订票界面设计


色彩选取


字体:冬青黑体

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

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


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


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


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


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


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


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

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


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


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

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

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


2

智慧医疗


色彩选取


字体:冬青黑体

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

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


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


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

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


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


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


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

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


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


男生版本


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


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


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


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


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


充值结束后选择挂号


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


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


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


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


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


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


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


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


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


添加了就诊日期


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

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


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


       

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

欢迎订阅公众号

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

:)

赞(1) 打赏
未经允许不得转载:IAMUE » 【优秀作业展示】交互设计基础(一)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏