电影相关APP界面设计练习改稿案例

阅读 109  ·  发布时间 2020-05-13 10:48:58  ·  xmh

本次挑选了一份电影相关的APP界面整套练习的设计进行修改,在看别人作业的同时也可以看看这些问题有没有出现在自己的作品中,思考下该如何进行优化。

1.jpg

页面1:

2.jpg

问题分析:

■一般打开应用都是要用户登录,而不是注册,应该把注册放在下面使用文字来表示。

■顶部图片选用不理想,看上去比较杂乱,可这种登录页可以不放电影主题的图片,放一些背景素材。

■输入部分分割线太深,切线和图标都无需使用彩色。

■底部太空,并且 Home Indicator 没有放上去。

改稿说明:

■修改了顶部图片。

■加入欢迎语,将页面修改为登录页,并且在输入部分上方加入手机号、验证码等标题。

■底部加入第三方图标,显得底部不会太空, 增加了 Home Indicator。

页面2:

3.jpg

问题分析:

■搜索页明显是多余的,无需单独使用一个标签来设计,并且搜索页下方的模块我也不知道是干嘛的,没有将该页面的功能很好表现出来。

■首页图片太多,看上去全是图,并且图片选用也不理想。

改稿说明:

■将搜索页和首页合并为一个页面,减少用户的跳转。

■修改了全部的图片。

■适当加入文字,使用图文混排,来使页面看上去并非全是图。

页面3:

4.jpg

问题分析:

■当前页面没有太大问题,只是卡片内文字的权重表现不理想。

■上面图片中间那段文字很多余,如果是刻意要展示,那就要把文字展示全,而不是截断一半的。

改稿说明:

■将卡片内文字的对比进行修改,标题使用更粗体,正文使用细体。

■顶部图片替换了没有文字版本的封面。

页面4:

5.jpg

问题分析:

■当前页面问题不大,顶部照片可以优化一下。

■下方个人信息可以往上移,和数据部分放在一起,它们属于一个模块。

改稿说明:

■修改了图片,顶部做成照片固定,右侧可以滑动来查看影人相册。

■将下方个人信息往上移动,和数据部分放在一起。

页面5:

6.jpg

问题分析:

■不知道顶部这个模块是干嘛,这个页面是影评,那就无需放多余元素

改稿说明:

■将顶部模块去除,原设计无法让人了解该模块是干嘛的。

■替换了所有图片

■修改了动态模块样式。

页面6:

7.jpg

问题分析:

■当前页面没有太大问题,但可以进一步优化。

改稿说明:

■减少顶部模块的文字数量,只用标题来展示。

■下方列表减少部分字段,只展示最重要的内容。

■对图片进行了替换。

页面7:

8.jpg

问题分析:

■当前页面底部太空,其他没有太大问题,可以进一步优化。

改稿说明:

■卡片内部新增实时动态播报字段,增加页面的内容。

■下方快速入口图标使用更亮眼的颜色来展示,和下方做出对比。

■下方列表无需使用彩色图标,将他们修改为单色。



电话咨询
邮件咨询
在线地图
QQ客服