本文为笔者学习网易云课堂《交互设计师·微专业》课程期间的实践作业，仅供学习交流，严禁盗用。
文章共分为三大板块：分别对「微信」iOS版、「最美应用」Android版、「果壳网」Web版的主要界面进行分析，进而对比iOS/Android/Web这三大系统的设计模式差异点。
一、「微信」iOS版
- 设备信息:iOS 10.2.1
- 微信版本:6.5.7
「微信」是一款即时通讯工具，用户的主要使用场景是与好友进行即时通讯，所以「微信」在页面中只呈现了四个主界面导航，并将聊天列表和通讯录放在第一、第二位，更加强调了产品定位。
1、页面结构与设计模式
「微信」iOS版·主界面
页眉:
「微信」的页眉大多都统一使用顶部导航栏的设计模式，即在对应页面中放置“返回”“标题”“工具”的不同搭配模式，使整体界面保持一致性。
页尾:
「微信」iOS版遵循iOS平台设计规范，将一级导航放置在页尾，采用标签式导航模式，不仅突出「微信」主要功能，也方便用户在不同功能间快速切换。
主体:
【微信】页面主要展示聊天列表；
【通讯录】页面主要展示好友列表，基本以头像加文字为主，采用垂直列表模式，使页面简单清晰；
【发现】页面和【我】页面中展示的是微信的二级菜单，结合垂直列表模式，形成垂直列表导航，不仅可以让界面变得简单清晰、易于理解， 还与微信的整体风格保持一致，让用户快速定位，高效操作。
「微信」iOS版·二级导航
【微信】页面的顶部导航栏中，结合了下拉菜单式导航，将相对不太重要的二级导航隐藏起来，使界面变得更加干净简洁；这种设计模式也能在以后的发展中增加更丰富的导航条目，方便迭代更新。
但这种模式让用户的操作变得复杂起来，特别是在二维码越来越盛行的情况下，用户需要打开微信，点击右上角，再点击扫一扫，才能进行二维码扫描，操作步骤太多，不方便。而且将二级导航藏起来后，用户需要凭借记忆或试错去寻找入口，增加了操作成本。
「微信」iOS版·【聊天】/【钱包】
「微信」的绝大多数页面都采用垂直列表模式布局，这样能使产品保持整体一致性，但也有几个特殊界面采用不同的列表模式，以满足不同场景需求：
-
【聊天】页面采用对话框形式，根据时间顺序罗列信息内容，很好的体现了实际生活场景。
-
【钱包】页面采用网格列表模式，结合导航模式形成宫格导航，充分利用界面，在有限空间内罗列大量功能，使功能扁平化，便于用户浏览与选择。
2、控件标准
2.1 搜索
「微信」iOS版·搜索栏
搜索模块中，「微信」iOS版按照iOS平台设计规范， 直接调用iOS搜索控件，统一样式，减少开发时间。
2.2 分段式导航
「微信」iOS版·分段式导航
微信-我-表情中的二级导航控件采用iOS标准控件——分段式导航，扩大了中间的内容区域，减小控件占用的面积。
但此控件的扩展性较小，如果后期有更多的分类，无法较好的继续融入。
二、「最美应用」Android版
- 设备信息:Android 6.0.1
- 最美应用版本:3.3.1
「最美应用」是一款为用户推荐优质APP的应用聚合平台。内容都是由最美玩家和设计师精挑细选后分板块推荐，但这些板块同质性很大，除了推荐是主功能，其他都是变相的辅功能，没有必要全部展示出来。
1、页面结构与设计模式
「最美应用」Android版·主界面
页眉:
「最美应用」的页眉使用了Material Design，充分利用应用栏显示应用的标识、导航、搜索及其他操作。
页尾:
为避免与安卓硬件的底部操作栏冲突，「最美应用」没有使用标签式导航， 而是改用了抽屉式导航，将几个功能并列放置。
主体:
「最美应用」多采用垂直列表设计模式进行主体部分的布局，在几个重要的推荐板块，还采用了轮播面板进行优质内容的推荐。
「最美应用」Android版·二级导航
「最美应用」的这些功能导航不是特别重要，将它们隐藏起来，可以突出【最美推荐】的主功能，也让主界面变得更加干净。
但是这样的布局会导致操作步骤增多，降低这些功能的使用频率，而且遇到大屏手机，单手操作去点击左上角会变得非常不便利。
「最美应用」Android版·【精选分类】
【精选分类】板块，它用卡片结合垂直列表导航模式设计二级导航，让整个布局变得简单清晰，易于理解。
「最美应用」Android版·【应用排行】
【应用排行】板块，它采用垂直列表导航模式将应用排序，可以让用户快速快速定位。
但这种设计方式，在整个应用里显得过于简单，与其他板块相比，不精致。
2、控件标准
2.1 搜索
「最美应用」Android版·搜索
「最美应用」的搜索控件按照Android平台设计规范，直接调用了安卓的搜索控件，统一样式，减少开发时间。
2.2 开关
「最美应用」Android版·开关
「最美应用」的开关控件按照Android平台设计规范，也直接调用了安卓的开关控件，减少开发时间。
三、「果壳网」Web版
- 操作系统:Windows 8.1
- 浏览器:QQ浏览器 9.5.4
「果壳网」是一个开放、多元的泛科技兴趣社区，并提供科技主题内容。按照「果壳网」的功能模块，主导航分为6+5模式的11大类，每一个子分类都可独立成为一个小网站。
1、网页布局
「果壳网」Web版·主界面
「果壳网」是内容型网站， 所以网页布局方式上更靠近新闻类网站。
网页主体部分采用两列分布，使页面看过去不那么拥挤，左侧放置最新推荐、热门问答、十五言、小组热帖等板块，突出整站的科学主题，右侧放置热门小组等其他推荐信息，对整站进行了补充说明。
2、页面设计
「果壳网」Web版·页眉
页眉:
网站在页眉直接展示logo、导航、搜索、用户登录等元素， 让整站结构清晰明了。
主体:
网站主体部分显示热门推广板块及产品相关广告，使用户在 浏览过程中无意识了解到更多品牌信息。
「果壳网」Web版·页尾
页尾:
页尾的其他信息页让用户对网站有了更深入的了解。
3、自适应设计
「果壳网」Web版·移动版
果壳网在小屏幕上的自适应设计套用了移动端的设计模式，采用抽屉式导航设计，将功能放置侧边栏。
但主要的导航仍显示在页眉下，显得过于重复，会让用户产生疑惑。
主体部分仍是分模块显示推荐内容，但多数显示文字，设计过于单调。
感谢阅读！
网友评论