A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 绘儿 黑马粉丝团   /  2022-5-3 15:54  /  645 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 绘儿 于 2022-5-3 15:56 编辑



透彻了解UI设计,从此系列帖开始!

布局合理的内容视图有利于用户浏览,提高用户使用频率。然而内容视图指的是什么?内容视图又包含哪些形式?


什么是内容视图?

内容视图指的是手机界面中用于展示内容的区域,是手机界面的重要组成元素之一。内容视图区域不仅可以展示内容信息,还能够进行一系列交互行为。例如,内容滚动,页面跳转、插人内容、删除内容等操作。如下图所示红框标识的部分为手机界面中的内容视图。


内容视图的分类

内容视图的设计样式多种多样,常见的样式分类主要有列表视图、卡片视图、集合视图、文本视图和网络视图,下面将对这些视图进行讲解。


1. 列表视图

列表视图是用分割线将内容进行区分。利用紧密、对比、重复、对齐”的原则设计每条列表的信息,使信息清晰有力地传达给用户。列表视图分为两种样式: 一种是平铺型,另一种是分组型,如下图所示。

   
左:平铺型    右:分组型

2. 卡片视图

卡片视图是将同类信息归纳到一一个矩形或者圆角矩形当中,在占用较少屏幕空间的情况下将信息有组织地划分到不同的区域中。卡片可以被堆叠、覆盖、移动,这样极大地扩展了一个内容块的视觉深度和可操作性。卡片在设计形式上还可以增加边缘、阴影,使得卡片具有立体感。


3. 集合视图

集合视图是将同类信息用平铺的形式展现,一般以图片为主题,文字为辅助信息。集合视图用于管理一系列有序的项,并以一种自定义的布局来呈现它们。例如,系统照片将图片集合在一起,以相同大小的正方形进行展示,用户通过点击图片放大查看,如下图所示为集合视图。


4. 文本视图

文本视图是一个能够显示多行文本的区域,当因内容太多而超出其适应范围时,可以支持滚动。同时,文本视图支持用户编辑,当用户轻击文本视图内部时,设备唤起键盘并根据输人的内容类型来指定不同的键盘类型,可以为用户提供更方便快捷地输入体验,下图所示为文本视图。



文本视图

5. 网络视图

目前绝大部分的网络视图是指直接在内容区域嵌入HTML5页面,其优点是可以在服务端直接快速发布、更新内容,而不需要在应用平台进行版本更新。例如,手机淘宝首页内容区域就采用了嵌入HTML5的网络视图,下图展示的就是淘宝双十一前的首页和淘宝双十一时的首页对比。




友情提示:若你是对设计不太了解的小萌新,看完这个问题后,却对设计还有太多的疑惑(前途、薪资、技术含量、女生是否好找工作.....),强烈推荐你观看《设计萌新必看:学习UI设计必问的50个问题,从此系列贴开始》,相信能扫除掉你心目中90%以上的常见问题,请狠狠点击下方链接:http://bbs.itheima.com/thread-514779-1-1.html





精华推荐:
UI设计师如何自我介绍最有用!
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路,助你轻松拿下Offer
初级设计师面试失败,大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3


--------------------------------------------------------------------------------------------
如果有用,记得点赞留言哦~
【推荐阅读】:黑马论坛快回帖仅需这简单3步http://bbs.itheima.com/thread-513666-1-1.html
获取【UI设计视频教程资料】加绘儿2168934524
--------------------------------------------------------------------------------------------



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马