《APP移动终端决胜之道视觉设计艺术》学习笔记
1.20-2.9
1.合理的层级化
2.信息的整合(短信收发件箱),信息的整合就像创建文件夹,可以将相关的东西放在一起,以便于使用者搜索与查找
3.(微信聊天界面)相比之下使用了对话框图形的界面,元素更加丰富,界面也更加美观,最重要的是,它能使不同的信息得到更加明显的区分,对话框图形就像把不同的专属空间给了不同的信息,以此来方便用户对于不同信息的识别。
4.(instgram滤镜界面),可视化设计,将抽象的东西具体化,带来了便捷与简单的用户体验,让用户有明显的点击与操控感
5.格式塔理论
格式塔理论都为视觉感知现象,其中接近性、相似性、共同命运与我们的视觉系统会有着给对象进行分组来感知事物的倾向相关;与我们的视觉系统会通过解析模糊或者以查漏补缺的方式来感知整体事物的倾向相关
(1)接近性原理:利用接近性原理,调整各部分物件远近的摆放距离,使各板块形成视觉上的组(利用底色区分板块,不能过分使用,利用线条区分板块,不能过粗)
(2)相似性原理:用线或面(色块,即不同背景色)分隔,线面结合,在分隔两个东西时不要既用线又用面
(3)连续性原理:适当添加小图形,添加背景,添加标识符号与说明
(4)封闭性原理:封闭or非封闭
(5)简化对称性原理
(6)主体与背景原理
(7)共同命运
6.视觉优化
(1)经验影响感知
(2)环境影响感知
(3)目标与感知:我们的视觉感知会忽略与目标无关的信息,因此,主要信息与次要信息的明显程度(例如让次要信息以弹框的形式出现来引起注意)
(4)结构化与感知:结构化能使文字信息变得精简(将信息整理,例如将纯文字文本转成车次信息:出行时间:等等),图形化的添加能让信息表现得到进一步优化,另外,应该通过交互设计隐藏过多的界面信息,,并通过颜色与图标区分不同的信息、板块,且应该添加线条分隔空间;对于长串的数字可以采用特定符号或空格来分隔数字,除此之外,在进行移动UI视觉设计时,也可以将文字信息分隔,加入图形、改变文字颜色等等来提起人们对于文字的阅读兴趣,过分拥挤死板的文字会增添用户的阅读负担。
7.
(1)别让信息设计影响阅读:MV,MUSIC VIDEO;不要轻易改变已经建立的用户阅读习惯
(2)当界面中拥有过多的文字信息时,我们应该尝试着将文字信息浓缩或是分散在不同的用户界面中,而不是通过缩小,这是种会让用户产生阅读障碍的方式(过小的文字会使得用户很难注意到这些信息)
(3)注意文字信息的识别与清晰度:例如与背景的颜色对比(但是也应该注意不能用过于强烈的对比),同时背景也不应该过于花哨
(4)注意文字信息的对齐方式:在阅读文字信息过程中,我们的视线会自动回到与上行文字相同的水平位置,若使用居中或右对齐,这样的经验便会让我们看向错误的位置,因此我们需要慎用文字对齐的方式,尤其是分点的信息,不太适用于居中对齐
(5)将信息放在用户能看见的位置:推测用户的视线走向,将想要用户看到的东西移动到离视力的中心凹更近的地方
(6)利用图形元素增强用户的感知(红色和提示符号,如红色错误,绿色对勾等等)
(7)利用对比在区别中突出重点信息;使用便于用户识别的颜色(蓝-黄,红-绿,黑-白);色彩搭配中的深浅度、面积大小与远近关系;不要使用过于刺激的颜色搭配;注意与界面环境色彩的搭配
8.可操控性体验
(1)用户点击控件时,一般不很精准,许多次的点击都在控件按钮以外,因此我们可以扩大控件的感应区域与范围,并根据控件左右位置的不同,设计控件的感应范围应向左侧扩展或是向右侧扩展(对于左侧的控件偏右,对于右侧的控件偏左)
(2)不同的功能或对象操作越一致,对于用户的长期记忆而言便越轻松
(3)有头便有尾,我们需要考虑到用户很有可能会忘记扫尾的工作,应尽量加入能帮助或提醒用户进行收尾工作的元素
《APP移动终端决胜之道视觉设计艺术》学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
- ucos实时操作系统学习笔记——任务间通信(消息)
ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...
随机推荐
- [BZOJ5248][2018九省联考]一双木棋
题目描述 https://www.lydsy.com/JudgeOnline/problem.php?id=5248 Solution 我们首先考虑放棋子的操作 发现它一定放棋子的部分是一个联通块 ...
- 洛谷P2051 [AHOI2009]中国象棋(dp)
题面 luogu 题解 \(50pts:\)显然是\(3\)进制状压\(dp\) \(100pts:\) 一行一行地考虑 \(f[i][j][k]\)表示前\(i\)行,有\(j\)列放了一个,有\( ...
- webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
npm install –save-dev extract-text-webpack-plugin@next 会下载到+ extract-text-webpack-plugin@4.0.0-beta. ...
- [黑科技]跑的比fread还快的cin挂和cout挂
CCPC赛后摸鱼搞了个新的奇怪外挂 这里贴上利用sgetn和sputn来实现的读入读出挂,理论上比fread更优 期望在赛中TLE的代码能强行卡过去hhh 利用小规模的Codeforces - 103 ...
- Linux常用快捷键、文件管理和查询
有话要说 为什么要用Linux?要用Linux的原因太多,想说说不完啊.如果你说用Linux只是为了装逼,那证明你真的还很菜.不排除有装逼了因素,那也只占非常少的比例,可以忽略不计.我们反问一下,为什 ...
- 布局优化之ViewStub、Include、merge使用分析
布局技巧 在Android开发过程中,我们会遇到很多的问题,随着UI界面越来越多,布局的重复性.复杂度也随之增加,所幸的是,Android官方也给出了几个对布局进行优化的方法,下面根据自己的理解对官方 ...
- [Xamarin.Android] 儲存資料於Windows Azure (转帖)
在準備討論Xamarin.Android 如何整合GCM與Windows Azure來實作Push Notification之前, 先來了解如何將Xamarin.Android 與Windows Az ...
- WPF中Style文件引用另一个Style文件中的样式
第1种方法: 直接在当前Style文件(*.xaml)文件中使用: <ResourceDictionary.MergedDictionaries>来进行合并 <!-- 关键是注意so ...
- PL/SQL之存储过程和函数
1.创建存储过程 .1语法: CREATE[OR REPLACE] PROCEDURE [schema.] procedure_name[(argument[{IN|OUT|IN OUT}] data ...
- layui使用 ——父,子页面传值
页面传值是非常常用的,layui自带弹窗功能,但是内置使用的是location.href 暂时没找到方法条件请求头,所以在后台需要放开拦截器, layer.open({ type : 2, title ...