《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 ...
随机推荐
- SVN解决冲突的方法
SVN管理代码工具在群组合作开发的过程中,若多人同时修改一个文件,就会出现冲突的情况. 冲突演示: 有A.B两个用户,他们各自从svn服务器中检出了file.txt文件,此时A.B.服务器三个地方的f ...
- 牛顿迭代法(Newton's method)
关键词:牛顿法.牛顿迭代法.牛顿切线法.牛顿-拉弗森方法 参考:牛顿迭代法-百度百科.牛顿切线法-百度文库数学学院.牛顿切线法数值分析.非线性方程(组)的数值解法.Latex入门 https://bl ...
- [Xamarin] 製作吐司(Toast)以及圖文並茂的Toast (转帖)
最近在看Xamarin使用C#來撰寫Android App . 紀錄一下,順便給之後有需要的人可以有所參考 :) 今天要來聊的是關於Toast 這東西,這在以前Android 上面我是很常使用 拿來l ...
- Java Web入门学习(一) STS与Tomcat配置
Java Web学习(一) STS与Tomcat配置 一.IDE的选择 使用基于Eclipse的STS Ide ,个人感觉挺好用的. 地址:http://spring.io/tools/sts 根据以 ...
- hibernate多对一单向关联注解方式
多对一单向关联,在多的一方加上一的一方作为外键.在程序里表现为:在多的一方加上一的引用. 小组类Group,用户User: Group: package com.oracle.hibernate; i ...
- 深入理解系列之 float
float的设计初衷: 仅仅是为了实现文字环绕效果 float的感性认知: 包裹性: 收缩:元素应用了float后,宽度收缩,紧紧地包裹住内容(即元素的宽度收缩到元素内的内容的宽度大小 坚挺:原来没有 ...
- 阿里云CentOS7.4上搭建FTP服务器
1 安装过程 第一步:首先判断是否安装了vsftpd # rpm -qa | grep vsftpd 第二步:如果没有安装则安装vsftpd # yum -y install vsftpd 从第三步开 ...
- 向已有的table中插入数据
table: <table id="seleted-table" class="table table-bordered table-hover" sty ...
- Mongo db 与mysql 语法比较
mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...
- 如何把连接字符串放到App.cfg配置文件中
首先主Windows程序要添加一个[应用程序配置文件]会在项目中生成一个App.config文件. 在项目中也引用System.Configuration这个引用 当前文档中没有源. 在后台数据类库中 ...