相近性在设计中的应用

By heiry on 2017-10-21 [ in 设计 ]

格式塔理论的相近性原则告诉我们,我们的大脑会将距离相近的各部分元素组成一个整体。

相近性原则:

当分离的各个元素接近的时候,他们便呈现一个整体的形象,就算这些元素看起来不一样。

相近掩盖差别:

利用相近性我们将不同的字母、形状及颜色元素组成一个标志。

尽管上述各个字母的形态并不一样,但是由于各个元素距离相近,我们在识别时仍会将其看作一个完整的词组。

尽管上述右边的标志是由不同形状及颜色的元素结合,但相近性原则使我们能够清晰识别出一个房子的轮廓。

组合相关元素:

将元素相合,能够创造出更有条理的展示,不但更具美感,也使读者在观看时更加轻松。

改造前的名片

缺乏联系的设计:

上面的这个设计仅仅是考虑如何填满版面,而联系信息却被分割成三块元素,这使到观看的人会花额外的精力将这些信息元素组合在一起。

改造后的名片

产生联系的设计:

将相关的文字元素且合起来,立即就产生了一种清晰的阅读效果,现在名片上的联系信息能够轻松地让人从上到下观看。上面竖版的排列中,标志形成了一个视觉焦点,所以我们的眼睛首先会移到上面观看,然后很自然地由上到下地阅读下面的联系信息。

白色背景的重要性:

相近性原则也取决于元素在背景上不同位置的放置,从而使人们获得各种不同的信息组合,而最清晰的效果就是利用白色背景来区分这些组合。



在上面这个关于学习提升的宣传单张中,我们通过元素的属性来将上方的文字区域A作为一个相近性的组合,也将其视作一个单独的组合,尽管B也是一堆文字,甚至两者的文字意思也接近,但我们并不会将A与B看作一个整体。

文章来源: http://www.sj33.cn/article/sjll/201707/47665.html

>> 阅读全文  >>

图例:极简主义字体设计思路

By heiry on 2017-10-19 [ in 设计 ]

f10c58e504e0a801219c770bed25.jpg

e75658e50993a801219c77c37e6c.jpg

 

>> 阅读全文  >>

三种需求拆解的思路

By heiry on 2017-10-19 [ in 设计 ]

原文作者:阿里巴巴_BBC_UED 王萌

原文标题:用户研究视角-3种问题拆解的思路探讨 http://www.zcool.com.cn/article/ZNDQwMjQ0.html

——————————————————————————————

一、 什么是问题拆解?

在日常工作中,不管是用研、设计,还是产品等,虽然具体工作内容有差异,但也会有相似的地方,那就是“问题解决”,偶尔也会遇到一些棘手的问题,大家先来看两个工作中的情景:

048558073e3fa84a0d304f371e57.jpg

 

你是不是与遇到过类似的问题?以上这些问题具有“大”威而鋼
“笼统”“难入手”的特点,那么把复杂的、笼统的问题拆解成一个个小的、可执行开展的问题就是问题拆解能力,只有正确拆解了问题,才能形成合理的假设、切入点。这个能力是不断进阶并胜任复杂任务的基本功。

7cbb58073e56a84a0e282bb14088.jpg

>> 阅读全文  >>

项目中的设计心理学

By heiry on 2017-10-19 [ in 设计 ]

原文作者: zlipy

原文出处:http://www.zcool.com.cn/article/ZNDM1NTky.html

———————————————————————————————————————-

结合自己的实际工作项目分享出的《设计师要懂心理学》;希望对大家有帮助

1、贯穿整个项目的设计思维(UE、UI必看)、本人亲测用心理学做金融设计网站改版
2、分析人的心理活动、记忆、思考、行为、感知、决策从而协助到大家的工作中来

3ece57e4a2a20000018c1b630608.jpg

这本书给我的启发很大~影响了我做对产品的思考;特写写文章与酷友共赏

此内容是根据自己的在工作中实际运用的思维;想获取我全部的文章总结;我已经附上了自己的压缩包(书籍、图片、源文章的总结)可以供大家下载;但是你必须要下载思维导图;我的格式为xmind;不想下载我也导出为图片格式可以供大家观看

1、卡尼萨三角

首先,说说我们眼睛在观察时的一点习惯。当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。

(更多…)

>> 阅读全文  >>

版式图片运用技巧

By heiry on 2017-10-17 [ in 设计 ]

原文作者:风的诗人

文章转自:http://www.zcool.com.cn/article/ZNTU2NzMy.html

——————————————————————————————-

undefined
(更多…)

>> 阅读全文  >>

“触动人心的设计”的方法研究

By heiry on 2017-10-17 [ in 设计 ]

原文作者: 阿里 B2B_UED团队

原文标题:《“触动人心的设计”方法初步探究》

————————————————————————————-

用户体验设计的精髓,在于恰到好处的设计出最合适的用户场景体验,而这种体验是不知不觉给予用户同时能让用户在触点的那个瞬间怦然心动,那如何让用户心动呢?

古人云:“动人心者,莫先乎情。”,同样的我们从约翰.奈斯比特的语言中窥见:”无论何处都需要高补偿的情感,社会中高技术的越多,我们就越渴望高情感的环境,用设计软性的一面来平衡技术硬的一面。设计作为人的创造性活动,不是摒除激情或者情感,而是要创造一种中性的、能容纳和激起使用者情感的东西,这种东西是一种境界。”

因此,我们1688UED在2014年组建了人文情怀课题研究小组专门来探讨如何进行“触动人心的设计”,课题研究的范围从马斯诺需求到各种效应理论以及设计心理学,大家在浩瀚的知识学说中徜徉,并不断碰撞产生了各种的灵感火花,最后得到了一个关于“DesignO2O”的设计思路以及“CORE”的方法模型,同时找到了如何验证我们“触动人心的设计”是否有效方法。

DesignO2O这个思路是由课题小组不离同学提出的也是我们整个设计方法的理论基石。(见下图)

人的大脑是个超级存储器,总是通过五感接受信息,被大脑识记,并且保存在记忆当中,五感由于我们是从事互联网设计行业,都是偏电脑页面的一些设计,所以主要能发挥的是视觉和听觉,线下某些实物的工业设计还会有嗅觉,味觉,触觉等等。图中的“识记-保存-重现”是人类记忆的主要过程,重现包括回忆和再认两个环节,我们这里提到的主要是指回忆,是在一定诱因的作用下,过去经历的事物在头脑中的再现过程。拥有记忆的人通过看见了一些事物或者听见了某些信息,和大脑保存的过去进行了重合配对,唤醒了记忆,那些画面会被重现,在这个过程中你的大脑已经不知不觉中招了、被刺激了,重现的画面在你的脑海里久久不能离去,以至于让你做出一些意想不到的事,就是我们说的情绪行为,以我们自身为例,影响的就是购买决策,在我们的平台上就有一群这样的用户,人称“月光族,剁手党”…所以我们发现对于一个完全没有记忆的人来说,其实是很难触动情感的。通过大量的案例收集和讨论给这样的方式在设计中的运用总结为“DESIGNO2O”,offline2online,就是刚才所说的过程,这个过程转化为设计就是把线下的场景或者人物或者事件等等还原到我们的设计中,公式就是要简单好记,才能被广泛引用,这也是O2O业务模式的设计延伸,也同样印证了一句哲学思想:everything is connected。万事万物都是互相联系的。 (更多…)

>> 阅读全文  >>

超大流量网站PHP到Node 的迁移

By heiry on 2017-10-15 [ in 技术 ]

转自:http://taobaofed.org/blog/2016/06/02/thing-about-taobao-homepage/

作者:淘宝前端团队阎王       原题《聊一聊淘宝首页和它背后的一套》

 

一、相关背景介绍

 

淘宝首页是淘宝的门面,承载着几乎淘系所有业务的入口,流量很大,量级单位为亿。近几年无线端崛起,业务重点开始向无线终端偏移(目前不能叫偏移,基本以无线为主了),所以淘宝 PC 端首页的流量也有削减,不过即便如此,它的日均 PV 依然相当高。

淘宝首页一向是内部平台和技术的试验田,它一直在变化着。最新的框架和系统都会找淘宝首页试点,可以试想下,如果某一项需要推动的升级或者优化措施在淘宝首页已经上线,并且拿到了良好的数据和稳定性,其他业务还有什么理由不去尝试和更迭呢?同时,去年一年身在淘宝前端的技术架构组,自然而然也会主动去 push 一些实验性的内容到业务上。

淘系的站点页面包括首页、其他频道页和活动页等,这些页面并不都由淘宝前端一行一行的代码码出来,业务如此之多,这种玩法即便人数 double 也忙不过来。事实上,大多数页面都是依托内部的搭建平台——运营或者前端通过模块搭建的方式——构建的,而前端 focus 的重点在于搭建平台的建设自身以及模块的通用性和复用率的保障,当然,还有一些工程化的东西。

使用搭建平台搭建的页面,前端只需要考虑组成页面的原子模块的开发,整体的渲染由搭建平台提供的统一脚本全权负责。而在淘宝首页上,考虑到页面模块数量巨多,加上还有少量跨部门、跨团队的沟通,渲染模型略微不同。

二、淘宝首页的整体变迁

背景中提到,淘宝首页依托于内部搭建平台,它的变迁自然也是跟着搭建系统的变化而变化的。

1. PHP 下的淘宝首页

接手淘宝首页不久,便遇到了一年一度的改版,那时它还运行在 PHP 环境中。这里需要说明的是,淘宝首页的所有代码完全由前端掌控,前端不会直接跟数据库打交道,其数据来源分为两部分。

数据来源

一是 运营填写的数据。 采用前端挖坑的形式,预留坑位让运营获取填写数据,如(伪代码):

  
<?php $info = Person('name:String:姓名,age:Number:年龄', '个人信息坑位填写');?>

<div>
<?php $info.forEach(index) { ?>
  Name: <?= info[index].name ?>, Age: <?= info[index].age ?>
<?php } ?>
</div>

(更多…)

>> 阅读全文  >>


© 2009-2024 MOSANG.NET DESIGNED BY HEIRY