# Visual interface design-week3 **Repository Path**: NFUNM060/Visual-interface-design-week3 ## Basic Information - **Project Name**: Visual interface design-week3 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-05 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 飞猪界面分析 --- - ### 攻略页面

![攻略页面](https://images.gitee.com/uploads/images/2020/0405/153816_de329bdb_1831522.png "屏幕截图.png") #### 1. 上方导航(如下图所示),采用了“格式塔”中的 **连续性原则** ,导航中未展示的部分不会影响用户的信息获取,同时给用户提供引导。

![上方导航](https://images.gitee.com/uploads/images/2020/0405/155628_31ebd280_1831522.png "屏幕截图.png") #### 2. 城市灵感模块(如下图所示),采用了“格式塔”中的 **连续性原则** ,模块在有限的尺寸展现更多内容,提高页面的扩展性。

![城市灵感](https://images.gitee.com/uploads/images/2020/0405/154833_adc63110_1831522.png "屏幕截图.png") #### 3. “景点”页面(如下图所示),采用了“格式塔”中的**闭合性原则**,有一定的互联网使用经验之后,用户明白下方有一条线就是选中状态。

![景点页面](https://images.gitee.com/uploads/images/2020/0405/155415_6f1deffa_1831522.png "屏幕截图.png") --- - ### 消息页面

![消息页面](https://images.gitee.com/uploads/images/2020/0405/153037_c0694d4e_1831522.png "屏幕截图.png") #### 消息页面中上方位置(如下图所示),采用了“格式塔”中的 **连续性原则** ,创建顺序并指导用户浏览不同的内容模块分组。

![上方位置](https://images.gitee.com/uploads/images/2020/0405/153327_54e32aac_1831522.png "屏幕截图.png") - ### 首页页面 ![首页](https://images.gitee.com/uploads/images/2020/0405/174341_8f0eb2f3_1648195.png "97a7b69ab47821751ca9b583ff47587a.png") 1. 页面上方“搜索框”与“扫码”图标体现了格式塔原则中的“相似性”。搜索框与“扫码”图标整体都以白色为呈现色调。 ![搜索](https://images.gitee.com/uploads/images/2020/0405/174031_cd036b51_1648195.jpeg "8bc01819dcdac727de4f52c16a05c7f.jpg") 2. 首页导航栏中最右侧未完全展现的标题体现了格式塔原则中的“连续性”。这种设计帮助了用户视线穿过屏幕内容,告诉用户“此处仍有内容”“可拉动”信息,增强了内容的连接性。 ![导航栏](https://images.gitee.com/uploads/images/2020/0405/174134_54278aaf_1648195.jpeg "e3984e1a06f200dc98d99683d4029cb.jpg") 3. 导航栏下的方框内容体现了格式塔原则中的“闭合性”。虽然方框中含有图片,大小不一的文字,但以方框作为分隔,将内容归为一类。 ![方框内容](https://images.gitee.com/uploads/images/2020/0405/174203_1fa6a9f1_1648195.jpeg "982ed19778f51d61ecfa279057e1c76.jpg") 4. 这列图标体现了格式塔原则中的“相似性”。以同样的彩色卡通感图画作为图标,在让画面显得生动的同时辅助用户更好的理解文字意思。 ![图标](https://images.gitee.com/uploads/images/2020/0405/174221_486ce611_1648195.jpeg "d9812bb1076edff71c006a1d00b307d.jpg") - ### 机票订票页 ![订票页](https://images.gitee.com/uploads/images/2020/0405/175556_2e9cab4d_1648195.png "0804d08db20734ff343eacddec817ab.png") 1. 订票页中订票形式的选中选项与未选中选项连结内容整体形成色差以区分,体现了格式塔原则中的“闭合性”。 2. 订票形式整体内容体现了格式塔原则中的“相近性”。因这部分内容紧凑,让用户在视觉上将其自动分为了一组。 ![订票形式](https://images.gitee.com/uploads/images/2020/0405/175831_3ab083c4_1648195.jpeg "0a2eee734396a65cb5ec4f68e82cd46.jpg") 3. 订票页与背景图片体现了格式塔原则中的“主体与背景”。将订票内容框占页面中间位置,以及以白色为底色的内容框覆盖了大部分背景图片,一次更加明显区分了主体与背景。 ![主体与背景](https://images.gitee.com/uploads/images/2020/0405/180609_7187e9a8_1648195.jpeg "1b2f21ceaf5636c27083fa855a03750.jpg") - ### 行程页面

![行程页面](https://images.gitee.com/uploads/images/2020/0405/175910_38f815eb_1831516.jpeg) #### 1. “时下热门”、“最嗨玩法”、“精彩推荐”(如下图所示),采用了“格式塔”中的 **相似性原则** ,文字加粗加大统一视觉样式,做出模块区分效果

![相似性原则](https://images.gitee.com/uploads/images/2020/0405/180205_6cd7418b_1831516.jpeg) #### 2. 模块结构(如下图所示),采用了“格式塔”中的 **连续性原则** ,在三个模块中页面左右两边的部分内容露出,引导用户左右滑动查看内容

![模块结构](https://images.gitee.com/uploads/images/2020/0405/180405_746567a8_1831516.jpeg) #### 3. 模块设计(如下图所示),采用了“格式塔”中的 **封闭性原则** ,采用模块设计,即使模块之间没有分割线,我们的视觉也倾向于将零散的内容视为一个整体

![模块结构](https://images.gitee.com/uploads/images/2020/0405/180405_746567a8_1831516.jpeg) - ### 我的页面

![我的页面](https://images.gitee.com/uploads/images/2020/0405/180723_31da8b2c_1831516.jpeg) #### 1. “我的订单”、“我的工具”、“我的飞猪里程”如下图所示),采用了“格式塔”中的 **相似性原则** ,文字加粗加大统一视觉样式,做出模块区分效果

![相似性](https://images.gitee.com/uploads/images/2020/0405/180652_a6d81213_1831516.jpeg) #### 2. 我的订单(如下图所示),采用了“格式塔”中的 **相近性原则** ,“待付款”“处理中”“待出行”“待评价”“退款/售后”颜色大小统一视觉样式,使之更具有关联性

![我的订单](https://images.gitee.com/uploads/images/2020/0405/180855_f8d02e78_1831516.jpeg) #### 3. 飞猪会员中心(如下图所示),采用了“格式塔”中的 **封闭性原则** ,模拟现实中会员卡的场景,符合用户的心理认知

![会员中心](https://images.gitee.com/uploads/images/2020/0405/181002_5bdded54_1831516.jpeg) ## 启发式评估报告: ### 评估对象综述:飞猪,指为淘宝会员提供机票、酒店、旅游线路等商品的综合性旅游出行网络交易服务平台。“飞猪”是面向年轻消费者的休闲度假品牌,与面向企业差旅服务的阿里商旅一起构成阿里巴巴旗下的旅行业务单元,让消费者获得更自由、更具想象力的旅程。 ### 评估原因:想做一款旅游业务类的app,选择“飞猪”app做参考。 ### 评估目的:采用格式塔原理的评估方法对“飞猪”app做可用性测试,找出旅游类app在核心界面设计上的优缺点,并提出自己app的设计方案。