在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文。顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华。分享给25学堂的app设计师们。

当然,下面的这些app设计知识点是来自《写给大家看的设计书》这本书。有兴趣的小伙伴可以去购买看全部的。

25学堂推荐:移动端UI设计必看的三本APP设计书籍

亲密性:将界面中相关的元素组织在一起,成为一个组,让它们不被视作一堆散乱且彼此无关的片段。

如果微信的信息列表页面,每一项的名称、时间、摘要只是样式区别却未经组织,就会变得不那么容易阅读,如下(图1)。尤其在列表项很多的时候,将拥挤不堪,让人窒息。

 

图1
实际的处理方式仅仅是采用了合理的列表项间距,以及每一项当中名称、时间、摘要的分布距离,就能轻松区分出列表项、每一项中内容的关系。秩序井然,符合逻辑,保证了良好的可读性。

见下(图2)

(图2)现在这样,已经成为“理所当然”

通过组织界面元素,体现亲疏关系,保证条理清晰,不仅做设计时要注意,开发的时候也要重视。

对齐:任何元素都不能在界面中随意摆放,应该跟界面中的其他元素存在相应的视觉关系。

如果多看阅读的图书详情页面,简介信息和操作按钮随机摆放,像尚未完成的拼图零件,会让人无比烦乱(强迫症患者不要看),如下(图3)。

(图3)散乱摆放的图书信息和操作按钮

实际页面见下(图4),书名、作者、评分、价格左对齐,评分标记星星与评价人数水平方向对齐,阅读与购买、收藏与赠送等根据操作类型分组,各自在水平方向对齐。整洁的排版布局,提供流畅的视觉引导。

(图4)干净整齐的排版

通过将文字信息、操作按钮的分别对齐,来明确它们要传递的信息。一般在设计过程中,很少会出现这种混乱的情况。更多是在开发测试阶段,界面中的类似问题会比较多,尤其是不同尺寸屏幕适配的时候。

 

重复:界面中的元素、样式、空间关系等有意识地在整个产品中重复,以保持良好的一致性。

比如微信的底部功能栏,不管当前在哪个功能模块,它都以相同的风格样式、功能数量、排列顺序出现。不会因为从微信切换到通讯录,就突然多出一个或减少一个功能,或者改变排列顺序。见下(图5)

(图5)微信统一的底部功能栏

 

又比如简书,统一采用曙光色作为焦点状态;根据使用场景出现的元素,比如搜索和提醒,采用同样的样式和位置;文章列表在不同的分类下也是统一的卡片样式(白天和夜间模式卡片底色、文字颜色有区别,但是在同一个模式下,对应的样式会始终保持一致)。

(图6)简书统一的颜色和产品结构

聪明地使用重复的手法,不仅可以强化设计效果、提高信息清晰度,使用户能够快速熟悉和习惯产品,增加认同感,还可以营造成熟、稳定的产品形象。对开发来说,可以减少代码量、便于统一管理和修改。

对比:如果两个界面元素要传递的信息不完全相同,就应该在视觉上加以区别,有利于信息阅读。

如多看阅读书城分类列表的书籍信息,见下(图7)。左边的文字样式未做对比区分,虽然能够正常阅读,但是信息层级显然不如右边有对比区分的明确。左边没有字号、颜色的对比,显得呆板不够美观;右边则能够让人阅读得很轻松,并感到愉悦。

(图7)多看阅读书籍列表

手机QQ的聊天界面,见下(图8)。左边对界面中现有图形元素作了统一的样式处理,消除了对比,于是可以发现无法区分操作层级,是否可以点击也辨别不出来,并且失去重点。右边是实际界面,图形元素有样式对比,层级明确,是否可点非常明显,业务逻辑体现得充分合理。

(图8)QQ聊天界面

对比可以有效地组织界面信息,体现信息层级关系,帮助用户理解产品操作逻辑。

实际上,很少有一个设计,会只应用这四个原则中的某一个。亲密性、对齐、重复、对比,它们相互协作,服务整体效果。

以上这些移动APP设计师知识来自《写给大家看的设计书》这本书,同样来自这本书的色彩搭配知识:APP色彩搭配方案是由主色、辅助色和点缀色构成。

这本书几乎可以视为形式美法则与格式塔原理的交集设计书籍:

形式美法则:变化与统一、对称与均衡、节奏与韵律;

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运;

然后又可以促进对形式美法则与格式塔原理之间差异的理解。

以上内容来源:http://www.jianshu.com/p/616fc9395a98#  同时25学堂也非常感谢作者lkl_ue 的分享。

转自:链接

最实用的APP界面设计知识,有温度的APP设计(转)的更多相关文章

  1. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  2. App界面设计利器Sketch 精选案例合集

    第1章 课程介绍主要介绍课程的安排及你将学到哪些使用技巧 1-1 课程介绍第2章 sketch 实例及相关工具本节课你将学到钢笔工具的使用.渐变及填充.投影的使用,体会并观察实际中物品的光影与材质:模 ...

  3. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  4. APP界面设计 大概总结

    APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...

  5. 这5个实用技巧,教你设计出更好的App

    三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个.据统计,只有4%的app会被使用一年以上. 所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有 ...

  6. 26款能够吸引用户的 iPhone App 界面设计

    在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...

  7. 20款优秀的国外 Mobile App 界面设计案例

    在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类, ...

  8. 23个移动app界面上的旋钮和刻度盘设计示例

      摘要: 从最初进入电子设备领域,旋钮和刻度盘的由最初的功能性设计转变为时尚的外观设计元素,比如在移动app中.这种转变并意外,旋钮和刻度盘不需要占用移动设备的太多空间,并可以简单地为用户提供一些列 ...

  9. [UI] APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.

随机推荐

  1. word to word

    Question: For each word, you can get a list of neighbor words by calling getWords(String), find all ...

  2. centos6.5 mysql开机启动

    可参考:centos6.5 nginx开机启动 /etc/init.d/下添加mysqld文件,内容如下: #!/bin/sh # Copyright Abandoned TCX DataKonsul ...

  3. Unity3d 防止内存修改工具的小方法

    一个非常简单的方法,直接上代码. private int curATK; private int curAtkKey; public int CurATK { get { return curATK ...

  4. iOS 在UITableViewCell中加入自定义view时view的frame设定注意

    由于需要重用同一个布局,于是在cellForRowAtIndexPath中把自定义view加在了cell上,我是这样设定view的frame的 var screenFrame = UIScreen.m ...

  5. 23. javacript高级程序设计-数据存储

    1. 数据存储 1.1 cookie HTTP Cookie, cookie,最初用来在客户端存储回话信息. (1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过 ...

  6. 项目管理工具~SVN

    SVN 定期更新:每周五,周一早上 目录完备: 需求文档     设计文档     数据字典     测试报告     代码备份     周报月报                           ...

  7. 【hadoop2.6.0】利用JAVA API 实现数据上传

    原本的目的是想模拟一个流的上传过程,就是一边生成数据,一边存储数据,因为能用上HADOOP通常情况下原本数据的大小就大到本地硬盘存不下.这一般是通过把数据先一部分一部分的缓冲到本地的某个文件夹下,hd ...

  8. POJ 1753 Flip game ( 高斯消元枚举自由变量)

    题目链接 题意:给定一个4*4的矩阵,有两种颜色,每次反转一个颜色会反转他自身以及上下左右的颜色,问把他们全变成一种颜色的最少步数. 题解:4*4的矩阵打表可知一共有四个自由变元,枚举变元求最小解即可 ...

  9. Myeclipse编写struts程序

    说到struts则必须要谈到MVC模式(Model2) 什么是MVC模式.随着应用系统的逐渐增大,系统的业务逻辑复杂度以几何级数方式增加,在这样的情况下,如果还是把所有的处理逻辑都放在JSP页面中,那 ...

  10. 对于类的双重调用的demo

    代码如下: package cao.com.duixiang; public class TestCCircle { public static void main(String[] args) { ...