《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 ...
随机推荐
- LARTC
大牛的博客 howto ,however, is simplify. another space ip link list ip address show ip route show route -n ...
- Eclipse打开时“发现了以元素'd:skin'”开头的无效内容。此处不应含有子元素的解决方法
把有问题的 devices.xml 文件删除,再在sdk 里面 tools\lib 下找到devices.xml 文件,将这个文件拷贝到你删除的那个文件夹里,重启 eclipse 就 OK 啦!
- python socket文件传输实现
简单版 server(服务端) import socket import subprocess import struct import json import os share_dir = r'E: ...
- Mac 10.12安装VirtualBox
说明:用VirtualBox主要是能开无缝模式. 下载: (链接: https://pan.baidu.com/s/1i5y78Ct 密码: e3bq)
- (转)搞个这样的APP要多久?心酸啊。
这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着水杯,正对面坐着来访的王总,他是在别处打拼的人,这几年据说收获颇丰,见移动互联网如火如荼,自然也想着要 ...
- 【Qt开发】StyleSheet使用总结
概述 转眼七年过去了,我是一个彻底拥抱过MFC的人,记得老大的一个需求要把按钮做成圆角,并添加背景颜色,做前端html的可能认为很简单,然而放到MFC上那可真的是很...很麻烦的,自定义类继承Butt ...
- docker中的命令参数(小白常用)
1 docker run run是最常用的命令,他是docker creat和docker start命令的组合,创建容器并启动它.run的参数比较难理解的是-i 和-t 以及-d,分别说说这三个. ...
- window.location和document.location的区别分析
用户不能改变document.location(因为这是当前显示文档的位置).但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而 ...
- eclipse修改默认注释
(来源:https://www.cnblogs.com/yangjian-java/p/6674772.html) 一.背景简介 丰富的注释和良好的代码规范,对于代码的阅读性和可维护性起着至关重要的作 ...
- javascript图形动画设计--画简单正弦波
<!doctype html> <html> <head> <meta charset="utf-8"> <title ...