php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

细节决定成败

寇老师 发表了文章 • 0 个评论 • 3 次浏览 • 6 小时前 • 来自相关话题

我们常说“细节决定成败”,有些界面会让人觉得不精致,缺细节,而这些细节又包括哪些呢?如何去深入呢?
界面元素的对齐,我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意摆放的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情。
像素精确,虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
界面光源的一致性,一致性是个很大的课题,应该能写一篇论文那么长,细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应该避免用深色的文字向上投深色的阴影
图标面积的一致性,这也是一个一直难以避免的问题,而且有很多主观成分,最好的方法是设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸
文案,虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
别直接使用 Windows 自带宋体 / 黑体里的英文!!!这个不解释
谨慎地使用高饱和度颜色、大差别渐变,我们 GUI 设计师总喜欢把自己当做艺术家,即使 GUI 真算艺术那也是限制最大的一门艺术(天朝的电影、电视剧不算。。。),大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥,所以一些醒目出跳的颜 色和渐变使用起来要比较小心,否则很容易产生“俗气”的感觉
适当的留白,留白是个很好的东西,尤其是当老板 / 客户 / PM 要求你做一些“大气”的设计时候能成为一个很好的说辞,但是留白同时也很难掌握度,过度的留白有时候会起到反作用,让我们的作品看起来没有细节、内容空 洞。就跟那些学画画的同学在电脑上画图经常水平镜像检查画面一样,有时候我也会把做到一半的设计去色、然后反白,看看那时候画面里的黑色会不会产生一种令 人恐怖的感觉(好吧,我承认我是个很感性的同学,很多设计思路和方法都不够科学)。。。
其实这些问题罗列一下很容易,但是日常工作当中要做到真的是很难,我们大家一起共勉吧~ 查看全部
我们常说“细节决定成败”,有些界面会让人觉得不精致,缺细节,而这些细节又包括哪些呢?如何去深入呢?
界面元素的对齐,我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意摆放的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情。
像素精确,虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
界面光源的一致性,一致性是个很大的课题,应该能写一篇论文那么长,细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应该避免用深色的文字向上投深色的阴影
图标面积的一致性,这也是一个一直难以避免的问题,而且有很多主观成分,最好的方法是设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸
文案,虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
别直接使用 Windows 自带宋体 / 黑体里的英文!!!这个不解释
谨慎地使用高饱和度颜色、大差别渐变,我们 GUI 设计师总喜欢把自己当做艺术家,即使 GUI 真算艺术那也是限制最大的一门艺术(天朝的电影、电视剧不算。。。),大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥,所以一些醒目出跳的颜 色和渐变使用起来要比较小心,否则很容易产生“俗气”的感觉
适当的留白,留白是个很好的东西,尤其是当老板 / 客户 / PM 要求你做一些“大气”的设计时候能成为一个很好的说辞,但是留白同时也很难掌握度,过度的留白有时候会起到反作用,让我们的作品看起来没有细节、内容空 洞。就跟那些学画画的同学在电脑上画图经常水平镜像检查画面一样,有时候我也会把做到一半的设计去色、然后反白,看看那时候画面里的黑色会不会产生一种令 人恐怖的感觉(好吧,我承认我是个很感性的同学,很多设计思路和方法都不够科学)。。。
其实这些问题罗列一下很容易,但是日常工作当中要做到真的是很难,我们大家一起共勉吧~

完善的品牌识别和网络解决方案

刘宇昆 发表了文章 • 0 个评论 • 4 次浏览 • 19 小时前 • 来自相关话题

Hannes Ahremark是设计工作室Studio Ahremar的设计工作室,位于瑞典哥德堡,旨在创造具有概念深度和现代视觉效果的复杂设计解决方案。根据Hannes在Behance上分享的项目,您可以证明他们保持多少目标,以提供真正令人敬畏的产品,在这种情况下,一个品牌标识和响应网站Limitato,一个致力于将时尚世界与时尚世界融为一体的时尚品牌艺术世界。 

尊重艺术家并保持其原创作品的真实性是Limitato业务的核心。Limitato与世界上一些最杰出的艺术家和摄影师合作,他们使用精选作品并将其转换为“限量可穿戴艺术”。 
 
Limitato来到Studio Ahremark,提供全面的视觉识别和网络解决方案,使其与其他“常规”时尚品牌区别开来,并强调他们对美术的承诺。 
 
该解决方案是一个网站,能够毫不费力地容纳艺术和时尚,而不会感到双面。这是通过创建一个将艺术家,他们的艺术和服装联系在一起的排版系统来完成的。此外,该网站还有一个主题引擎,可以根据要显示的艺术品创建不同的情绪和布局。
 
品牌识别与网页设计
 


















































  查看全部
Hannes Ahremark是设计工作室Studio Ahremar的设计工作室,位于瑞典哥德堡,旨在创造具有概念深度和现代视觉效果的复杂设计解决方案。根据Hannes在Behance上分享的项目,您可以证明他们保持多少目标,以提供真正令人敬畏的产品,在这种情况下,一个品牌标识和响应网站Limitato,一个致力于将时尚世界与时尚世界融为一体的时尚品牌艺术世界。 

尊重艺术家并保持其原创作品的真实性是Limitato业务的核心。Limitato与世界上一些最杰出的艺术家和摄影师合作,他们使用精选作品并将其转换为“限量可穿戴艺术”。 
 
Limitato来到Studio Ahremark,提供全面的视觉识别和网络解决方案,使其与其他“常规”时尚品牌区别开来,并强调他们对美术的承诺。 
 
该解决方案是一个网站,能够毫不费力地容纳艺术和时尚,而不会感到双面。这是通过创建一个将艺术家,他们的艺术和服装联系在一起的排版系统来完成的。此外,该网站还有一个主题引擎,可以根据要显示的艺术品创建不同的情绪和布局。
 
品牌识别与网页设计
 

1.jpg


2.jpg


3.jpg


4.jpg


5.jpg


6.jpg


7.jpg


8.jpg


9.jpg


10.jpg

 

设计领域里的数字之美

寇老师 发表了文章 • 0 个评论 • 7 次浏览 • 3 天前 • 来自相关话题

比例关系是设计时必须要考虑的元素之一,无论在尺寸、空间还是颜色上,比例和谐与否会影响设计元素之间的关系。比例可以创建视觉层次,也可以产生一种张力或一种和谐感。纵观设计历史,运用比例进行创作一直是一个创造性的方法。一些体系如黄金比例和三分法将结构带入到设计中,创造了一种和谐感,并确保了平衡和连贯性。品牌形象设计和版式设计是把比例应用到设计中的主要领域。
 
黄金比例黄金比又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值约为1:0.618,即长段为全段的0.618。0.618是被公认为最具有审美意义的比例数字。
那黄金分割线到底是个什么东西呢。它在什么位置?它在画面中的什么地方?
有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边是1这么一个比例。
如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

三分线(黄金比例的衍生)
我们还有个困难,那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说,我们有一种简化黄金风格线的做法?就是三分线。
什么意思呢?三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。

白银比例
根号矩形具有特殊性质,由√2矩形开始可以无限地衍生出√3、√4、√5、√6等矩形,同时在这些矩形内部又可以分割出无限的等比矩形。
白银比例 √2 ≈ 1.414

青铜比例
因为根号矩形的等比性和可无限分割型,所以在分割构图中和黄金矩形一样,能产生大量和谐的组合。
青铜比例 √3 ≈ 1.732

斐波那契数列(黄金比例的衍生)
斐波那契数列是由意大利数学家奥纳多·斐波那契在1202年出版《算盘全书》中提出。这组数列的数字为1、1、2、3、5、8、13、21、34…从第三位开始,每一个数都是由前两位相加得出。而这个数列的比例形式非常接近黄金比例,所以又称“黄金分割数列”。
斐波那契数列(FibonacciSequence)数列是这样一个数列:
1、1、2、3、5、8、13、21、34、55、89…

等差数列
等差数列是最常见数列的一种,如果一个数列从第二项起,每一项与它前一项的差等于同一个常数,这个数列就叫作等差数列。比如1、3、5、7、9、11、13…

等比数列
如果一个数列从第二项起,每一项与它前一项的比值等于同一个常数,这个数列就叫作等比数列。比如1、2、4、8、16、32、64…

卢卡斯数列
卢卡斯数列:1、 3、 4、 7、 11、18、 29、 47、 76、 123…
斐波那契数列和卢卡斯数列具有相同的性质:从第三项开始,每一项都等于前两项之和,我们称之为斐波那契—卢卡斯递推。

卡特兰数
卡特兰数是一种经典的组合数,经常出现在各种计算中,其前几项为 : 1、2、5、14、42、132、 429、1430、4862…

帕多瓦数列
帕多瓦数列是:1,1,1,2,2,3,4,5,7,9,12,16,21,28,37,49,65,86,114,151……
它从第四项开始,每一项都是前面2项与前面3项的和。即x=(x-2)+(x-3),x为项的序数(x>4)。
它和斐波拉契数列非常相似,稍有不同的是:每个数都是跳过它前面的那个数,并把前面的两个数相加而得出的

雷诺数列
雷诺数列是把10分成5份,或10份、20份、40份的一个方法,就是应用在分割比例上,二是应用在字号比例大小选择上。从数学上讲就是把10分别开5次方、10次方、20次方和40次方。我们以5次方为例分别是:10%、16%、25%、40%、63%、100%。

勒·柯布西耶 — 模度(黄金比例的衍生)
1948年,经过7年的理论研究与试验,柯布出版了《模度-合乎人体比例的、通用与建筑和机械的和谐尺度》一书,详细阐述了模度理论的开端、发展、完善到实际应用。此书的出版标志着模度理论的正式建立。
比较成熟的模度系统的数字推导起始于以身高为6英尺(约183厘米)人作为标准,结合斐波那契数列分析。对人体的分析得出的结论包括以下几个关键数字:举手高(226厘米),身高(183厘米),脐高(113厘米)和垂手高(86厘米)。这一系列数字都可以利用黄金分割比和斐波那契数列结合在一起:43=70×0.618,70=113×0.618,113=183×0.618;43+70=113,70+113=183,43+70+113=226。
柯布还借助“模度”的比例优势对文艺复兴的几何不变性研究展开了批判。他认为对正多面体、星形体及正多边形的研究,背离了基于视觉判断的建筑学的本质,因为人眼对不同距离的事物的认知并不是均匀、等分的而是渐变的

三角函数特殊角
特殊三角函数值一般指在0,30°,45°,60°,90°,180°角下的正余弦值。
我们在设计中会把360°角度会进行细分,以15°角为一个单位进行递增归纳我们常用的角度值:0°、15°、30°、45°、60°、90°、120°、135°、150°、180°、270°
我们在设计中在颜色的色相就是用360°来衡量的,设计中经常使用不透明度配色法就是把颜色不透明度10等分,在产品设计中我们确定主色的颜色后,可以根据主色的色相的角度值比如每次增加15°来找到合适的辅助色和点缀色。
最近两年流行的2.5d插画风格就是会基于30°倾斜角去统一轴的方向。
品牌设计中也是一样,很多都需要线条辅助。线的角度有0°、15°、30°、45°、60°、90°帮助设计的更加合理规范。

8点网格
建立8点为一个单位的网格,所有的元素尺寸都是8的倍数。使用 8 的增量来确定页面上元素的大小和空间。界面设计中的边距或填充都是 8 的增量(倍数)
如果你用8作为设计的最小单位,你可以很方便的缩小的你的设计尺寸,8/2=4,4/2=2,2/2=1。

图片常用尺寸
在UI界面设计中我们经常需要使用不同尺寸的图片,由于移动端界面大小有限,在大量界面设计中总结了图片尺寸的比例有1:1、2:3、4:3、16:9、16:10。
Airbnb移动端的界面中使用了大量1:1、3:2、13:21等尺寸大小的图片,有了基于黄金比例的图片尺寸让界面排版看上去更加合理舒服。

费希纳矩形
19世纪中叶,德国心理学家费希纳曾经做过一次别出心裁的试验,他召开一次“矩形展览会”,会上展出了他精心制作的各种矩形,并要求参观者投票选择各种自认为最美的矩形,结果以下四种矩形入选(宽×长):(1)5×8;(2)8×13;(3)13×21;(4)21×34。
因为5∶8=0.625,8∶13≈0.615,13∶21≈0.619,21∶34≈0.618。由此可见,它们的宽与长的比都接近于0.618,因此这些矩形可近似地看作黄金矩形,给人以美的感受。
 
  查看全部
比例关系是设计时必须要考虑的元素之一,无论在尺寸、空间还是颜色上,比例和谐与否会影响设计元素之间的关系。比例可以创建视觉层次,也可以产生一种张力或一种和谐感。纵观设计历史,运用比例进行创作一直是一个创造性的方法。一些体系如黄金比例和三分法将结构带入到设计中,创造了一种和谐感,并确保了平衡和连贯性。品牌形象设计和版式设计是把比例应用到设计中的主要领域。
 
黄金比例黄金比又称黄金律,是指事物各部分间一定的数学比例关系,即将整体一分为二,较大部分与较小部分之比等于整体与较大部分之比,其比值约为1:0.618,即长段为全段的0.618。0.618是被公认为最具有审美意义的比例数字。
那黄金分割线到底是个什么东西呢。它在什么位置?它在画面中的什么地方?
有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边是1这么一个比例。
如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

三分线(黄金比例的衍生)
我们还有个困难,那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说,我们有一种简化黄金风格线的做法?就是三分线。
什么意思呢?三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。

白银比例
根号矩形具有特殊性质,由√2矩形开始可以无限地衍生出√3、√4、√5、√6等矩形,同时在这些矩形内部又可以分割出无限的等比矩形。
白银比例 √2 ≈ 1.414

青铜比例
因为根号矩形的等比性和可无限分割型,所以在分割构图中和黄金矩形一样,能产生大量和谐的组合。
青铜比例 √3 ≈ 1.732

斐波那契数列(黄金比例的衍生)
斐波那契数列是由意大利数学家奥纳多·斐波那契在1202年出版《算盘全书》中提出。这组数列的数字为1、1、2、3、5、8、13、21、34…从第三位开始,每一个数都是由前两位相加得出。而这个数列的比例形式非常接近黄金比例,所以又称“黄金分割数列”。
斐波那契数列(FibonacciSequence)数列是这样一个数列:
1、1、2、3、5、8、13、21、34、55、89…

等差数列
等差数列是最常见数列的一种,如果一个数列从第二项起,每一项与它前一项的差等于同一个常数,这个数列就叫作等差数列。比如1、3、5、7、9、11、13…

等比数列
如果一个数列从第二项起,每一项与它前一项的比值等于同一个常数,这个数列就叫作等比数列。比如1、2、4、8、16、32、64…

卢卡斯数列
卢卡斯数列:1、 3、 4、 7、 11、18、 29、 47、 76、 123…
斐波那契数列和卢卡斯数列具有相同的性质:从第三项开始,每一项都等于前两项之和,我们称之为斐波那契—卢卡斯递推。

卡特兰数
卡特兰数是一种经典的组合数,经常出现在各种计算中,其前几项为 : 1、2、5、14、42、132、 429、1430、4862…

帕多瓦数列
帕多瓦数列是:1,1,1,2,2,3,4,5,7,9,12,16,21,28,37,49,65,86,114,151……
它从第四项开始,每一项都是前面2项与前面3项的和。即x=(x-2)+(x-3),x为项的序数(x>4)。
它和斐波拉契数列非常相似,稍有不同的是:每个数都是跳过它前面的那个数,并把前面的两个数相加而得出的

雷诺数列
雷诺数列是把10分成5份,或10份、20份、40份的一个方法,就是应用在分割比例上,二是应用在字号比例大小选择上。从数学上讲就是把10分别开5次方、10次方、20次方和40次方。我们以5次方为例分别是:10%、16%、25%、40%、63%、100%。

勒·柯布西耶 — 模度(黄金比例的衍生)
1948年,经过7年的理论研究与试验,柯布出版了《模度-合乎人体比例的、通用与建筑和机械的和谐尺度》一书,详细阐述了模度理论的开端、发展、完善到实际应用。此书的出版标志着模度理论的正式建立。
比较成熟的模度系统的数字推导起始于以身高为6英尺(约183厘米)人作为标准,结合斐波那契数列分析。对人体的分析得出的结论包括以下几个关键数字:举手高(226厘米),身高(183厘米),脐高(113厘米)和垂手高(86厘米)。这一系列数字都可以利用黄金分割比和斐波那契数列结合在一起:43=70×0.618,70=113×0.618,113=183×0.618;43+70=113,70+113=183,43+70+113=226。
柯布还借助“模度”的比例优势对文艺复兴的几何不变性研究展开了批判。他认为对正多面体、星形体及正多边形的研究,背离了基于视觉判断的建筑学的本质,因为人眼对不同距离的事物的认知并不是均匀、等分的而是渐变的

三角函数特殊角
特殊三角函数值一般指在0,30°,45°,60°,90°,180°角下的正余弦值。
我们在设计中会把360°角度会进行细分,以15°角为一个单位进行递增归纳我们常用的角度值:0°、15°、30°、45°、60°、90°、120°、135°、150°、180°、270°
我们在设计中在颜色的色相就是用360°来衡量的,设计中经常使用不透明度配色法就是把颜色不透明度10等分,在产品设计中我们确定主色的颜色后,可以根据主色的色相的角度值比如每次增加15°来找到合适的辅助色和点缀色。
最近两年流行的2.5d插画风格就是会基于30°倾斜角去统一轴的方向。
品牌设计中也是一样,很多都需要线条辅助。线的角度有0°、15°、30°、45°、60°、90°帮助设计的更加合理规范。

8点网格
建立8点为一个单位的网格,所有的元素尺寸都是8的倍数。使用 8 的增量来确定页面上元素的大小和空间。界面设计中的边距或填充都是 8 的增量(倍数)
如果你用8作为设计的最小单位,你可以很方便的缩小的你的设计尺寸,8/2=4,4/2=2,2/2=1。

图片常用尺寸
在UI界面设计中我们经常需要使用不同尺寸的图片,由于移动端界面大小有限,在大量界面设计中总结了图片尺寸的比例有1:1、2:3、4:3、16:9、16:10。
Airbnb移动端的界面中使用了大量1:1、3:2、13:21等尺寸大小的图片,有了基于黄金比例的图片尺寸让界面排版看上去更加合理舒服。

费希纳矩形
19世纪中叶,德国心理学家费希纳曾经做过一次别出心裁的试验,他召开一次“矩形展览会”,会上展出了他精心制作的各种矩形,并要求参观者投票选择各种自认为最美的矩形,结果以下四种矩形入选(宽×长):(1)5×8;(2)8×13;(3)13×21;(4)21×34。
因为5∶8=0.625,8∶13≈0.615,13∶21≈0.619,21∶34≈0.618。由此可见,它们的宽与长的比都接近于0.618,因此这些矩形可近似地看作黄金矩形,给人以美的感受。
 
 

什么是造字工房非商业字体

刘宇昆 发表了文章 • 0 个评论 • 37 次浏览 • 2019-08-09 17:05 • 来自相关话题

造字工房宣布从2054年4月1日起个人正版字体全部免费。现如今,造字工房遵守承诺,已将所有个人(非商用)字体产品于官方网站免费提供下载。
 
汉字字体字形的设计也正面临革新发展。造字工房的成立,既是担负这份使命与责任,专注为客户在品牌推广方面提升视觉优势,从而直接影响企业品牌的价值提升。努力帮助视觉设计师在设计过程中有更多的优秀字体选择,使其更快更好的完成设计项目。
 
中国设计师的生存从业环境一直不易,设计资源(尤其汉字字体)更是匮乏,造字工房即便逆境生长,也甘愿与大家一起分享我们的劳动成果,共同承担商业版权环境之责任。造字工房的个人(非商业应用)正版字体产品,是不应用于任何商业的使用行为!

为了我们设计从业环境得以改善和良性发展,鼓励造字工房对汉字字体的创新与发展做出贡献,请以实际行动支持我们。只有您的支持和鼓励,才能使我们进步。
 

                                                             



 
汉字字体的设计开发工作一直是不太被大众关注和了解的行业,而应用又无处不在。汉字字体字数繁多,结构复杂,每一款字体的设计和开发都是一项工程,更是字体设计师们艰苦努力的结晶,请您在使用字库字体的同时支持正版,从而帮助字体设计从业者为社会提供更多更优秀的汉字字体,丰富汉字之美。
 
 
  查看全部
造字工房宣布从2054年4月1日起个人正版字体全部免费。现如今,造字工房遵守承诺,已将所有个人(非商用)字体产品于官方网站免费提供下载。
 
汉字字体字形的设计也正面临革新发展。造字工房的成立,既是担负这份使命与责任,专注为客户在品牌推广方面提升视觉优势,从而直接影响企业品牌的价值提升。努力帮助视觉设计师在设计过程中有更多的优秀字体选择,使其更快更好的完成设计项目。
 
中国设计师的生存从业环境一直不易,设计资源(尤其汉字字体)更是匮乏,造字工房即便逆境生长,也甘愿与大家一起分享我们的劳动成果,共同承担商业版权环境之责任。造字工房的个人(非商业应用)正版字体产品,是不应用于任何商业的使用行为!

为了我们设计从业环境得以改善和良性发展,鼓励造字工房对汉字字体的创新与发展做出贡献,请以实际行动支持我们。只有您的支持和鼓励,才能使我们进步。
 

                                                             
aaa.jpg

 
汉字字体的设计开发工作一直是不太被大众关注和了解的行业,而应用又无处不在。汉字字体字数繁多,结构复杂,每一款字体的设计和开发都是一项工程,更是字体设计师们艰苦努力的结晶,请您在使用字库字体的同时支持正版,从而帮助字体设计从业者为社会提供更多更优秀的汉字字体,丰富汉字之美。
 
 
 

在UI设计中有效利用空白区域

刘宇昆 发表了文章 • 0 个评论 • 61 次浏览 • 2019-08-02 13:32 • 来自相关话题

白色空间是设计中最被忽视的部分之一,通常是UX / UI设计人员最有效的解决方案。

在我的设计生涯开始时,我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而,当出现挑战时期时,有效利用空白区域对于解决问题至关重要。

然而,正确使用白色空间是非常必要的,否则设计最终会看起来非专业和简单。

                                                                 




什么是白色空间?
白色空间是布局之间的空白区域,段落中的线条,多个设计元素之间的空白等。这些元素可以是图像,排版,插图,图标等。白色空间不是指空白色背景,也不一定是白色,它可以是任何颜色或图案,因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域,那么让我们深入了解它将如何影响可用性和用户界面。
 
1、改善你的视觉层次结构

                                                                 




将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则,最重要的信息必须位于顶部,大胆且易于查看,而底部最不重要的信息,在较小的框中,不太集中。这很容易理解,甚至可以在您的设计中展示。
但是,在上面的例子中,左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构,并导致用户混淆或不感兴趣以吸收给定的信息集。
因此,示例显示了白色空间如何使设计更易于扫描,从而更容易理解。
 
 2.帮助用户关注重要方面
 

                                                                   



 

负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。

在非专业术语中,宏观空间是指设计中较大的白色空间段(页眉,页脚和网站边距之间的空间),而微空间指的是不同UI元素之间的较小空间(行和段落之间的空间)

如果您希望将用户的注意力集中在说明图而不是文本上,则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中,在左侧,插图与其他元素混合,禁止用户吸收适当的信息,而在右侧,插图享有白色空间,允许用户专注于相关插图,而后者又链接提供的信息。
 
3、找到合适的平衡点
                             
                                                                   



 
白色空间有多少白色空间?在设计领域经常提出的一个问题。对此的简单回答是,允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。

在上面的例子中,右侧的图像爆炸,信息使其势不可挡。虽然右侧的图像是舒缓的,但能够在不压倒用户的情况下实现理解。
 
4、保持一致

                                                                 




一致性是白色空间的关键。设计中的每条信息都是一致的,白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。

利用率的不一致将导致突然的用户界面。

示例中,不一致的白色间距使得它看起来像两组照片,一组在顶部,另一组在底部。在右侧图像中,所有6张照片看起来都是一致的,并且是1套照片的一部分。
 
5、创造性地适应元素中的空白区域

                                                           




白色空间的创造性利用是一项技能,可以使元素看起来更加美观,并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来,而不是利用白色空间来改善视觉吸引力,而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx,其中白色空间用于显示与品牌使命产生共鸣的箭头。

总之,白色空间就像艺术一样,你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章,它帮助您重新思考用户界面设计中的白色间距原则。

                      
 
 
  查看全部
白色空间是设计中最被忽视的部分之一,通常是UX / UI设计人员最有效的解决方案。

在我的设计生涯开始时,我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而,当出现挑战时期时,有效利用空白区域对于解决问题至关重要。

然而,正确使用白色空间是非常必要的,否则设计最终会看起来非专业和简单。

                                                                 
1.jpg


什么是白色空间?
白色空间是布局之间的空白区域,段落中的线条,多个设计元素之间的空白等。这些元素可以是图像,排版,插图,图标等。白色空间不是指空白色背景,也不一定是白色,它可以是任何颜色或图案,因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域,那么让我们深入了解它将如何影响可用性和用户界面。
 
1、改善你的视觉层次结构

                                                                 
2.jpg


将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则,最重要的信息必须位于顶部,大胆且易于查看,而底部最不重要的信息,在较小的框中,不太集中。这很容易理解,甚至可以在您的设计中展示。
但是,在上面的例子中,左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构,并导致用户混淆或不感兴趣以吸收给定的信息集。
因此,示例显示了白色空间如何使设计更易于扫描,从而更容易理解。
 
 2.帮助用户关注重要方面
 

                                                                   
3.jpg

 

负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。

在非专业术语中,宏观空间是指设计中较大的白色空间段(页眉,页脚和网站边距之间的空间),而微空间指的是不同UI元素之间的较小空间(行和段落之间的空间)

如果您希望将用户的注意力集中在说明图而不是文本上,则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中,在左侧,插图与其他元素混合,禁止用户吸收适当的信息,而在右侧,插图享有白色空间,允许用户专注于相关插图,而后者又链接提供的信息。
 
3、找到合适的平衡点
                             
                                                                   
4.jpg

 
白色空间有多少白色空间?在设计领域经常提出的一个问题。对此的简单回答是,允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。

在上面的例子中,右侧的图像爆炸,信息使其势不可挡。虽然右侧的图像是舒缓的,但能够在不压倒用户的情况下实现理解。
 
4、保持一致

                                                                 
5.jpg


一致性是白色空间的关键。设计中的每条信息都是一致的,白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。

利用率的不一致将导致突然的用户界面。

示例中,不一致的白色间距使得它看起来像两组照片,一组在顶部,另一组在底部。在右侧图像中,所有6张照片看起来都是一致的,并且是1套照片的一部分。
 
5、创造性地适应元素中的空白区域

                                                           
7.jpg


白色空间的创造性利用是一项技能,可以使元素看起来更加美观,并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来,而不是利用白色空间来改善视觉吸引力,而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx,其中白色空间用于显示与品牌使命产生共鸣的箭头。

总之,白色空间就像艺术一样,你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章,它帮助您重新思考用户界面设计中的白色间距原则。

                      
 
 
 

快速改善UI视觉体验的7个小技巧

寇老师 发表了文章 • 0 个评论 • 53 次浏览 • 2019-07-29 09:34 • 来自相关话题

也许你是个新手设计师,也许你是个有着丰富开发经验的开发者,但是有需求让自己设计的网页和UI看起来更像那么一回事,至少看起来不是一个外行的手笔。

那么今天的文章应该能够帮到你。在UI的设计过程中,有很多技巧并不需要很深厚的设计知识,但是它们能让你的UI和网页界面看起来有明显的提升。改进设计这件事情,经验和技巧往往能让人少走弯路。

闲话少叙,下面我们具体看看。

1. 按钮色彩凸显重要性
在给用户提供多个选择的时候,可以通过色彩所传递的情绪是积极还是消极的,来简单快速地进行设计。
 
实际上,红色和绿色按钮的色彩含义,已经横跨物理世界和数字设计领域,我们每天在很多实体产品上也能看到类似的设计,包括交通上的红绿灯,警告标识,以及实体按钮。

绿色表示通行,红色表示禁止。如果用户需要购买一个漏斗,你希望感兴趣的用户赶紧点击,而不是取消。

另外,如果你的网站或者 APP 涉及到重要性不同的若干交互,除了按钮都要标识出相应的文本标签内容以外,还可以借助色彩填充与否来进一步区分层级结构。
 
有色彩填充的按钮、幽灵按钮(无色彩填充、有边框)以及无边框无填充按钮来区分。 而在少数情况下,对于系统有重要影响的、破坏性的或者限制性的按钮,也应该突出显示,但是可以使用红色来进行强调和警告。这个时候,相对的「非负面」的按钮则被视作为重要性较低的操作。
 
简而言之,实际上用户用来区分按钮的核心靠的是感知而非复杂逻辑判断,设计的基本规则在上面,但是更重要的是要基于情绪和感知来进行设计。
 
2. 用字重和明暗来区分层级

尤其是在构建文本内容的视觉层级的时候,可用到的属性很多,只使用大小差异来构建就显得过于单一了。

在很多时候,可以借助色彩、字重、明暗来进行区分。我们可以让更重要的文本更大、字体更粗、色彩更加鲜明,或者使用更深的黑色来呈现。
 
3. 用留白来隔离元素

两个元素互不相关,如果想将它们分隔开来,使用分割线似乎是一件理所当然的事情?当然可以,但是这种方式真的是非常过时且笨拙的一种呈现方式。你需要的是更好、更优雅、更贴合当下的一种呈现方式。

不是简单地使用分割线,而是使用留白,或者说负空间来间隔就可以了。分割线在很大程度上是丑陋且难以驾驭的视觉噪音,相对而言留白则好了很多。
 
多数情况下,删除分隔线条是比较快速的方法,当然更多的时候需要你适当地调整一下留白的大小。

使用分割线来分隔内容,不仅会让扫视页面花费更长的时间,而且增加的信息噪音会影响整体的层次结构。
 
4. 用阴影替代边框

想要凸显一些元素,并不一定需要依靠描边。使用阴影则可以起到同样的效果,单独使用则会显得更加整洁。描边+阴影则会显得过于杂乱。

使用相对不那么具有侵略性的小阴影无疑让效果更加轻松,看起来也不会突兀。
 
5. 用色条提升视觉调性

如果觉得内容区块过于单调,可以根据你的目的来强化这一区块的视觉属性。在内容区的一边加上色条能够在提升视觉属性的同时,赋予这一区块内容以情绪。

色条可以是单色的,也可以是渐变的,这取决于你想传达什么样的视觉体验。这个色条还可以具备良好的功能性。当然,这很大程度是用在相对比较素的页面上的,如果页面本身已经很花哨了,就不太用得上。
 
比如使用红色和绿色来标识不同的状态,也可以用色条来标识出被触发的 Tab 或者控件。
 
6. 用背景色区分区块

其实,同样是为了进行区分内容区块和层级,这个方法同样优雅而快速,几乎可以算是毫不费力的一种设计技巧。
 
为了区分两个不同区块的元素,简单地使用不同的背景来进行区分也可以,本质上,它采用的类似卡片式设计的思路——用不同的卡片来归类内容。

相对而言,使用有差异但是不那么显著的不同色块来作为背景,在保证整体整洁的同时,起到了区分的作用。
 
7. 「字」尽其用

谁不喜欢漂亮的字体呢?当然都喜欢,但是字体的功用其实各不相同。从呈现正文的强可读性文本,到装饰性极强的视觉化字体,各种不同的字体需要应对不同的功能。

简单看看几种不同类型的字体:

1. 衬线字体:Serif 本身就是衬线的意思,这样的字体字符的末尾通常是会有小的装饰性的衬线。衬线除了装饰性以外,还能强化字体的可读性。常见的衬线字体:Georgia,Times New Roman,Cambria。

2. 非衬线字体:也就是 Sans-Serif 字体,它相对而言更加现代,衬线被去掉之后,线条感更强,更加干净,也更加贴合数字时代的一些显示需求。常见的非衬线字体:Helvetica,Montserrat,Gotham。

人们通常会认为,衬线字体更加适宜长时间阅读,它也更多地运用在印刷品上。然而衬线字体的衬线和边角大多更加锐利,在一定程度上会被视作为视觉噪音。在屏幕分辨率尚且达不到要求的时代,衬线字体的显示问题很大。当然,如今屏幕分辨率提高起来之后,这个问题几乎不存在了,只是在小字号和低分辨率和小屏幕上,依然存在这个问题。

3. 手写字体:手写字体通常被认为是手写风格的字体,在呈现的时候,常常会有连写的笔画,更贴近传统的书写字体所呈现出来的效果。手写字体更加随意和有趣。常见的手写字体包括:Alex Brush,Great Vibes,Sofia。

4. 展示性字体:展示性字体是一个功能导向型的分类,通常指的是用来作为标题展示、用于海报、徽章等地方的字体,它们表现力更强,视觉特征更突出,直言不讳地说就是为了吸引用户的注意力。常见的展示性字体包括:Algerian,Curlz,Gigi,Umbra。
 
在网页设计中,绝大多数情况下都只会使用衬线字体和非衬线字体两种,在英文网站当中,通常会采用一种衬线字体+一种非衬线字体的搭配方式。注意,如果有不同粗细和字重的字体,使用同一字体族中字体为好。在中文当中,开源且可以免费商用的「思源黑体」和「思源宋体」是一个设计中非常常见的选择。

在进行视觉设计的时候,我坚持使用2种字体,极少会使用3种字体,后者最多会在强调视觉的商业或者艺术性项目当中使用,比如 Banner 和海报。

结语

我真心期望这样的小技巧能够帮你做出好的设计,无论你是设计师还是其他职业。很多时候,设计是灵活的,是基于感知的,有方法可供遵循的,尤其当你仔细观察一些现有的好设计,会发现有很多这样的小技巧。观察共性,仔细感知,总结经验,你也可以。 查看全部
也许你是个新手设计师,也许你是个有着丰富开发经验的开发者,但是有需求让自己设计的网页和UI看起来更像那么一回事,至少看起来不是一个外行的手笔。

那么今天的文章应该能够帮到你。在UI的设计过程中,有很多技巧并不需要很深厚的设计知识,但是它们能让你的UI和网页界面看起来有明显的提升。改进设计这件事情,经验和技巧往往能让人少走弯路。

闲话少叙,下面我们具体看看。

1. 按钮色彩凸显重要性
在给用户提供多个选择的时候,可以通过色彩所传递的情绪是积极还是消极的,来简单快速地进行设计。
 
实际上,红色和绿色按钮的色彩含义,已经横跨物理世界和数字设计领域,我们每天在很多实体产品上也能看到类似的设计,包括交通上的红绿灯,警告标识,以及实体按钮。

绿色表示通行,红色表示禁止。如果用户需要购买一个漏斗,你希望感兴趣的用户赶紧点击,而不是取消。

另外,如果你的网站或者 APP 涉及到重要性不同的若干交互,除了按钮都要标识出相应的文本标签内容以外,还可以借助色彩填充与否来进一步区分层级结构。
 
有色彩填充的按钮、幽灵按钮(无色彩填充、有边框)以及无边框无填充按钮来区分。 而在少数情况下,对于系统有重要影响的、破坏性的或者限制性的按钮,也应该突出显示,但是可以使用红色来进行强调和警告。这个时候,相对的「非负面」的按钮则被视作为重要性较低的操作。
 
简而言之,实际上用户用来区分按钮的核心靠的是感知而非复杂逻辑判断,设计的基本规则在上面,但是更重要的是要基于情绪和感知来进行设计。
 
2. 用字重和明暗来区分层级

尤其是在构建文本内容的视觉层级的时候,可用到的属性很多,只使用大小差异来构建就显得过于单一了。

在很多时候,可以借助色彩、字重、明暗来进行区分。我们可以让更重要的文本更大、字体更粗、色彩更加鲜明,或者使用更深的黑色来呈现。
 
3. 用留白来隔离元素

两个元素互不相关,如果想将它们分隔开来,使用分割线似乎是一件理所当然的事情?当然可以,但是这种方式真的是非常过时且笨拙的一种呈现方式。你需要的是更好、更优雅、更贴合当下的一种呈现方式。

不是简单地使用分割线,而是使用留白,或者说负空间来间隔就可以了。分割线在很大程度上是丑陋且难以驾驭的视觉噪音,相对而言留白则好了很多。
 
多数情况下,删除分隔线条是比较快速的方法,当然更多的时候需要你适当地调整一下留白的大小。

使用分割线来分隔内容,不仅会让扫视页面花费更长的时间,而且增加的信息噪音会影响整体的层次结构。
 
4. 用阴影替代边框

想要凸显一些元素,并不一定需要依靠描边。使用阴影则可以起到同样的效果,单独使用则会显得更加整洁。描边+阴影则会显得过于杂乱。

使用相对不那么具有侵略性的小阴影无疑让效果更加轻松,看起来也不会突兀。
 
5. 用色条提升视觉调性

如果觉得内容区块过于单调,可以根据你的目的来强化这一区块的视觉属性。在内容区的一边加上色条能够在提升视觉属性的同时,赋予这一区块内容以情绪。

色条可以是单色的,也可以是渐变的,这取决于你想传达什么样的视觉体验。这个色条还可以具备良好的功能性。当然,这很大程度是用在相对比较素的页面上的,如果页面本身已经很花哨了,就不太用得上。
 
比如使用红色和绿色来标识不同的状态,也可以用色条来标识出被触发的 Tab 或者控件。
 
6. 用背景色区分区块

其实,同样是为了进行区分内容区块和层级,这个方法同样优雅而快速,几乎可以算是毫不费力的一种设计技巧。
 
为了区分两个不同区块的元素,简单地使用不同的背景来进行区分也可以,本质上,它采用的类似卡片式设计的思路——用不同的卡片来归类内容。

相对而言,使用有差异但是不那么显著的不同色块来作为背景,在保证整体整洁的同时,起到了区分的作用。
 
7. 「字」尽其用

谁不喜欢漂亮的字体呢?当然都喜欢,但是字体的功用其实各不相同。从呈现正文的强可读性文本,到装饰性极强的视觉化字体,各种不同的字体需要应对不同的功能。

简单看看几种不同类型的字体:

1. 衬线字体:Serif 本身就是衬线的意思,这样的字体字符的末尾通常是会有小的装饰性的衬线。衬线除了装饰性以外,还能强化字体的可读性。常见的衬线字体:Georgia,Times New Roman,Cambria。

2. 非衬线字体:也就是 Sans-Serif 字体,它相对而言更加现代,衬线被去掉之后,线条感更强,更加干净,也更加贴合数字时代的一些显示需求。常见的非衬线字体:Helvetica,Montserrat,Gotham。

人们通常会认为,衬线字体更加适宜长时间阅读,它也更多地运用在印刷品上。然而衬线字体的衬线和边角大多更加锐利,在一定程度上会被视作为视觉噪音。在屏幕分辨率尚且达不到要求的时代,衬线字体的显示问题很大。当然,如今屏幕分辨率提高起来之后,这个问题几乎不存在了,只是在小字号和低分辨率和小屏幕上,依然存在这个问题。

3. 手写字体:手写字体通常被认为是手写风格的字体,在呈现的时候,常常会有连写的笔画,更贴近传统的书写字体所呈现出来的效果。手写字体更加随意和有趣。常见的手写字体包括:Alex Brush,Great Vibes,Sofia。

4. 展示性字体:展示性字体是一个功能导向型的分类,通常指的是用来作为标题展示、用于海报、徽章等地方的字体,它们表现力更强,视觉特征更突出,直言不讳地说就是为了吸引用户的注意力。常见的展示性字体包括:Algerian,Curlz,Gigi,Umbra。
 
在网页设计中,绝大多数情况下都只会使用衬线字体和非衬线字体两种,在英文网站当中,通常会采用一种衬线字体+一种非衬线字体的搭配方式。注意,如果有不同粗细和字重的字体,使用同一字体族中字体为好。在中文当中,开源且可以免费商用的「思源黑体」和「思源宋体」是一个设计中非常常见的选择。

在进行视觉设计的时候,我坚持使用2种字体,极少会使用3种字体,后者最多会在强调视觉的商业或者艺术性项目当中使用,比如 Banner 和海报。

结语

我真心期望这样的小技巧能够帮你做出好的设计,无论你是设计师还是其他职业。很多时候,设计是灵活的,是基于感知的,有方法可供遵循的,尤其当你仔细观察一些现有的好设计,会发现有很多这样的小技巧。观察共性,仔细感知,总结经验,你也可以。

UI / UX设计如何积极影响搜索引擎优化

刘宇昆 发表了文章 • 0 个评论 • 60 次浏览 • 2019-07-26 17:56 • 来自相关话题

                                                                   



顶级应用程序开发公司已经充分意识到搜索引擎优化的好处。对于一些人而言,这可能是一个流行语,但那些在所选行业中为自己命名的人都知道,没有什么比事实更进一步。用户体验设计和用户界面设计在搜索引擎优化中也起着重要作用。
实际上,UI / UX Web和应用程序设计是获得第一印象的主要关键。应用程序或站点的设计及其可用性将决定浏览器是否被强制返回。反过来,这会影响客户在搜索引擎优化方面的成功程度。
要了解有关UI / UX Web设计可能对搜索引擎优化产生的积极影响的更多信息,请务必仔细查看以下指南。那些希望为自己赢得更多名声的人也希望在做出决定之前咨询顶级应用程序开发公司。
 
1.更快的网站和应用程序

现在是企业面对某些事实的时候了。顶级应用开发公司总是让客户了解速度的重要性。换句话说,网站或应用需要快速加载。该网站或应用程序还必须提供快速导航。如果网站或应用程序没有快速加载,它将在搜索引擎排名中受到影响。事实上,缓慢的网站可能永远无法从这些损失中恢复过来。
攀登搜索引擎排名非常具有挑战性。这是所有人中最重要的排名因素之一。那些花时间聘请合适的设计师来获得用户界面和用户体验的人总是会比那些没有这种设计者的人获得更大的成功。
 

2.改进导航
要扩展最后一点,导航至关重要。如此多的网站和应用程序死于葡萄藤,因为它们不易于使用。菜单是否过于混乱或充满了多余的信息?每个网页都有一个菜单吗?访问者在被引导到的地方获得了所有必要的信息吗?这些都是向顶级应用程序开发公司提出的问题。
 

                                                                 



 
 
搜索栏也是绝对必须的。这使访问者不会浪费太多时间。所有菜单都应该易于理解。如果不是,这将激励用户将他们的点击带到其他地方。谷歌并不高度评价那些难以使用的网站,并且它们永远不会排在任何有机搜索的首位。

3.创建必要的标题
在网站和应用程序设计时,并不总是考虑标题。但是,这些标题是用户必须依赖的路线图。愿意花时间考虑这个过程的来龙去脉的用户界面和用户体验设计师总是会获得更大的成功。设计不当的标题将显着破坏搜索引擎排名。

搜索引擎抓取工具无法在这些实例中轻松了解网站的用途。正确的标题使搜索引擎索引器更容易知道发生了什么,并使浏览器的生活更轻松。不要在网站或应用上使用太多标题和标签。这是顶级应用程序开发公司将始终引导客户远离的东西。

4.会话持续时间更长
一个精心设计的网站或应用程序总是会吸引更多的访问者,但他们愿意留多久?这是需要回答的真正问题。网站或应用必须提供引人入胜的内容。从那里,必须考虑广泛的其他排名因素。任何希望提供商品和服务的公司都希望最大化会话持续时间。
 
 
 
 
 
 
 
  查看全部

                                                                   
图片1.png

顶级应用程序开发公司已经充分意识到搜索引擎优化的好处。对于一些人而言,这可能是一个流行语,但那些在所选行业中为自己命名的人都知道,没有什么比事实更进一步。用户体验设计和用户界面设计在搜索引擎优化中也起着重要作用。
实际上,UI / UX Web和应用程序设计是获得第一印象的主要关键。应用程序或站点的设计及其可用性将决定浏览器是否被强制返回。反过来,这会影响客户在搜索引擎优化方面的成功程度。
要了解有关UI / UX Web设计可能对搜索引擎优化产生的积极影响的更多信息,请务必仔细查看以下指南。那些希望为自己赢得更多名声的人也希望在做出决定之前咨询顶级应用程序开发公司。
 
1.更快的网站和应用程序

现在是企业面对某些事实的时候了。顶级应用开发公司总是让客户了解速度的重要性。换句话说,网站或应用需要快速加载。该网站或应用程序还必须提供快速导航。如果网站或应用程序没有快速加载,它将在搜索引擎排名中受到影响。事实上,缓慢的网站可能永远无法从这些损失中恢复过来。
攀登搜索引擎排名非常具有挑战性。这是所有人中最重要的排名因素之一。那些花时间聘请合适的设计师来获得用户界面和用户体验的人总是会比那些没有这种设计者的人获得更大的成功。
 

2.改进导航
要扩展最后一点,导航至关重要。如此多的网站和应用程序死于葡萄藤,因为它们不易于使用。菜单是否过于混乱或充满了多余的信息?每个网页都有一个菜单吗?访问者在被引导到的地方获得了所有必要的信息吗?这些都是向顶级应用程序开发公司提出的问题。
 

                                                                 
3.png

 
 
搜索栏也是绝对必须的。这使访问者不会浪费太多时间。所有菜单都应该易于理解。如果不是,这将激励用户将他们的点击带到其他地方。谷歌并不高度评价那些难以使用的网站,并且它们永远不会排在任何有机搜索的首位。

3.创建必要的标题
在网站和应用程序设计时,并不总是考虑标题。但是,这些标题是用户必须依赖的路线图。愿意花时间考虑这个过程的来龙去脉的用户界面和用户体验设计师总是会获得更大的成功。设计不当的标题将显着破坏搜索引擎排名。

搜索引擎抓取工具无法在这些实例中轻松了解网站的用途。正确的标题使搜索引擎索引器更容易知道发生了什么,并使浏览器的生活更轻松。不要在网站或应用上使用太多标题和标签。这是顶级应用程序开发公司将始终引导客户远离的东西。

4.会话持续时间更长
一个精心设计的网站或应用程序总是会吸引更多的访问者,但他们愿意留多久?这是需要回答的真正问题。网站或应用必须提供引人入胜的内容。从那里,必须考虑广泛的其他排名因素。任何希望提供商品和服务的公司都希望最大化会话持续时间。
 
 
 
 
 
 
 
 

5个设计小技巧

寇老师 发表了文章 • 0 个评论 • 35 次浏览 • 2019-07-23 09:33 • 来自相关话题

1.调整行间距

行间距大家都知道,但是具体如何设定值很多人不知道,一般我常用规则是 +4 ,比如文字大小是12PX,那么行间距就是16,以此类推文字是14,那么行间距就是18。

除了+4的规律你也可以运用黄金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黄金值)取四舍五入。

很多人要问,我如何判断界面里面用多大的行间距呢?道理很简单,就是看你们内容,如果你们app内容需要很丰富,你可以行间距小一些让屏幕展示更多内容,可以运用+4的原则,目前淘宝天猫是这个原则,如果你页面内容更加留白大一些阅读舒服一些,可以运用黄金比例的行间距,比如新闻阅读软件,需要大量留白来调整呼吸感!
 2.调整字间距

除了行间距,字间距同样很重要,特别是英文页面时候,同样的内容,字间距,和行间距不合适,看起来界面就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。

页面字母和字母之前距离非常的紧密,句子和句子之间的行间距也很近,导致阅读起来很密集,不够舒服,相反右边通过加大行间距和字间距,使得内容没有那么满,字母和字母之间的间距,行与行之间的间隔,使得整个设计节奏得到了一些舒缓!

需要注意的是:不要给太大的字间距,有时候过大也会让读者不舒服。


3.减少线 

在一个设计里面减少线条,或者让线条最少化,是让UI设计看起来干净的一种很重要的方法,通过间距来分割信息,加强内容和内容之间的间距,这样做,用户也是可以很清晰的区分信息层级。

需要注意的是:优先保证内容清晰,如果有些地方一定要用到线条,一定要使用它。


4.留白

页面放松和呼吸感在UI中非常重要,在左侧的设计中,元素之间的距离特别小,都挤在一个空间里面,非常的满。

要通过运用了版式,和空间感,有足够的空间让元素之间去呼吸让用户感觉舒服,让页面看起来更加的层次分明,利索干净。
 
 5运用卡片

在清晰度层面,使用卡片是帮助内容信息反馈的很好一种视觉形式,同时也让信息更加明确哪块是哪块。
 
卡片化设计在移动端让设计更加干净利落,是经常运用到的设计点。

总结

今天分享的几个小技巧点,其实是我们每天做设计中遇见的,需要灵活的多学多用,同时我们每天看到的一些好的设计,记得去留意分析,为什么别的设计好,别人设计看起来那么干净,毕加索说过:好的设计师借鉴,伟大的设计师偷。


1.加强行间距,+4原则或黄金比例

2.加大字间距: 0.1或0.2勿过大

3.减少线条,如非得已使用线

4.合理留白,拉开信息层级

5.运用卡片,更好整合信息
  查看全部
1.调整行间距

行间距大家都知道,但是具体如何设定值很多人不知道,一般我常用规则是 +4 ,比如文字大小是12PX,那么行间距就是16,以此类推文字是14,那么行间距就是18。

除了+4的规律你也可以运用黄金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黄金值)取四舍五入。

很多人要问,我如何判断界面里面用多大的行间距呢?道理很简单,就是看你们内容,如果你们app内容需要很丰富,你可以行间距小一些让屏幕展示更多内容,可以运用+4的原则,目前淘宝天猫是这个原则,如果你页面内容更加留白大一些阅读舒服一些,可以运用黄金比例的行间距,比如新闻阅读软件,需要大量留白来调整呼吸感!
 2.调整字间距

除了行间距,字间距同样很重要,特别是英文页面时候,同样的内容,字间距,和行间距不合适,看起来界面就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。

页面字母和字母之前距离非常的紧密,句子和句子之间的行间距也很近,导致阅读起来很密集,不够舒服,相反右边通过加大行间距和字间距,使得内容没有那么满,字母和字母之间的间距,行与行之间的间隔,使得整个设计节奏得到了一些舒缓!

需要注意的是:不要给太大的字间距,有时候过大也会让读者不舒服。


3.减少线 

在一个设计里面减少线条,或者让线条最少化,是让UI设计看起来干净的一种很重要的方法,通过间距来分割信息,加强内容和内容之间的间距,这样做,用户也是可以很清晰的区分信息层级。

需要注意的是:优先保证内容清晰,如果有些地方一定要用到线条,一定要使用它。


4.留白

页面放松和呼吸感在UI中非常重要,在左侧的设计中,元素之间的距离特别小,都挤在一个空间里面,非常的满。

要通过运用了版式,和空间感,有足够的空间让元素之间去呼吸让用户感觉舒服,让页面看起来更加的层次分明,利索干净。
 
 5运用卡片

在清晰度层面,使用卡片是帮助内容信息反馈的很好一种视觉形式,同时也让信息更加明确哪块是哪块。
 
卡片化设计在移动端让设计更加干净利落,是经常运用到的设计点。

总结

今天分享的几个小技巧点,其实是我们每天做设计中遇见的,需要灵活的多学多用,同时我们每天看到的一些好的设计,记得去留意分析,为什么别的设计好,别人设计看起来那么干净,毕加索说过:好的设计师借鉴,伟大的设计师偷。


1.加强行间距,+4原则或黄金比例

2.加大字间距: 0.1或0.2勿过大

3.减少线条,如非得已使用线

4.合理留白,拉开信息层级

5.运用卡片,更好整合信息
 

名片设计怎么做?

刘宇昆 发表了文章 • 0 个评论 • 40 次浏览 • 2019-07-18 14:53 • 来自相关话题

       好的名片设计都是在版式、字体、排印等多方面共同形成的。而不是简单的一个字体和印刷技术就能搞定的。所以我们在学习名片设计时候要多去注重字体排印细节、版式细节、字体使用方法等。简约的风格更能帮助用户查看信息

           



 
一款非常简约的名片,设计出来的标志只有一种颜色,创造性,简洁地采用了白色的背景,LOGO放在最显眼的地方(正面),是一个很好的表现方式,设计一款现代化的名片。在正面和背面的标志或图案,你可以列出相关的信息,包括名称,公司名称,标记线,和联系信息方式等。

           



 
       名片作为一种职业的独立媒体,在设计上要讲究其艺术性。但它同艺术作品有明显的区别,它不像其他艺术作品那样具有很高的审美价值,可以去欣赏,去玩味。它在大多情况下不会引起人的专注和追求,而是便于记忆,具有更强的识别性,让人在最短的时间内获得所需要的情报。因此名片设计必须做到文字简明扼要,字体层次分明,强调设计意识,艺术风格要新颖。
        名片设计可以采用横式来排名片版,也可以使用竖式和折卡式。您运用自己对名片内容的理解,把文字、图片、标志、色块、图形进行有机的排列组合,最后在电脑中形成名片。
       字体选择和色彩选择是名片的主要修饰手段。变换字体是名片设计的主要方式。名片上文字本来多,内容也没有必然的联系,所以可分散排列,每一内容的字体可以使用不同的字体,不同的字号大小,对字体进行特殊处理,也可使用不同的字体颜色;对名片的色彩,您可以使用照片,也可以使用色块,配合文字与商标的色彩,使名片更有美感。但名片的色彩选择,决定名片的价格,您只选择双色印刷,那么您无论印照片或色块,只能在三原色(红、绿、蓝)和黑色中选择两种进行搭配;您选择三色印刷,您选择的范围要大一点,可印出彩色图片;要想您印出的色彩更饱满,您最好选择四色印刷。 查看全部
       好的名片设计都是在版式、字体、排印等多方面共同形成的。而不是简单的一个字体和印刷技术就能搞定的。所以我们在学习名片设计时候要多去注重字体排印细节、版式细节、字体使用方法等。简约的风格更能帮助用户查看信息

           
v2-7849ccbd318caa6802777f6c37faf960_hd.jpg

 
一款非常简约的名片,设计出来的标志只有一种颜色,创造性,简洁地采用了白色的背景,LOGO放在最显眼的地方(正面),是一个很好的表现方式,设计一款现代化的名片。在正面和背面的标志或图案,你可以列出相关的信息,包括名称,公司名称,标记线,和联系信息方式等。

           
v2-bd14e9880b769dff058cccd644468c35_hd.jpg

 
       名片作为一种职业的独立媒体,在设计上要讲究其艺术性。但它同艺术作品有明显的区别,它不像其他艺术作品那样具有很高的审美价值,可以去欣赏,去玩味。它在大多情况下不会引起人的专注和追求,而是便于记忆,具有更强的识别性,让人在最短的时间内获得所需要的情报。因此名片设计必须做到文字简明扼要,字体层次分明,强调设计意识,艺术风格要新颖。
        名片设计可以采用横式来排名片版,也可以使用竖式和折卡式。您运用自己对名片内容的理解,把文字、图片、标志、色块、图形进行有机的排列组合,最后在电脑中形成名片。
       字体选择和色彩选择是名片的主要修饰手段。变换字体是名片设计的主要方式。名片上文字本来多,内容也没有必然的联系,所以可分散排列,每一内容的字体可以使用不同的字体,不同的字号大小,对字体进行特殊处理,也可使用不同的字体颜色;对名片的色彩,您可以使用照片,也可以使用色块,配合文字与商标的色彩,使名片更有美感。但名片的色彩选择,决定名片的价格,您只选择双色印刷,那么您无论印照片或色块,只能在三原色(红、绿、蓝)和黑色中选择两种进行搭配;您选择三色印刷,您选择的范围要大一点,可印出彩色图片;要想您印出的色彩更饱满,您最好选择四色印刷。

设计方案决策指南

寇老师 发表了文章 • 0 个评论 • 49 次浏览 • 2019-07-16 09:01 • 来自相关话题

设计师、产品经理在做设计的过程中,不可避免的会遇到很多的方案决策。

面对众多设计方案时,如何去决策,按照什么标准去决策更有科学性和说服力,这是一个值得我们去思考的问题。

在日常工作中,我们经常遇到这种情况。产品经理完成初始原型图(设计图A)之后,到了交互设计师手上,交互设计师将产品经理的一些方案重新改了一遍,变成了现在的交互文档(设计图B)。

视觉设计师将交互文档按照自己的理解,重新做了一遍调整,变成了视觉稿(设计图C)。

最终的视觉稿在开发阶段,开发觉得不好,又和产品经理沟通,又改了一遍,形成了设计稿D。

以上这种情况是各个角色根据自己的理解,将设计方案进行修改,最终的设计方案都是在各个角色间妥协,形成一个折中方案。

这种过程造成了设计方案的决策过于随意,那么有没有一套完整的科学方法去决策设计方案呢?

本篇文章为设计方案的决策指南,旨在找到合理的方案去指导设计方案,并给予设计方案一个良好的决策方向。

文章大纲:

1.用户调研结论

2.用户反馈

3.灰度测试数据

4.三种标准的权重

5.方案确认/优化

6.总结

大纲可看出,通过用户调研结论、用户反馈、灰度测试数据三个参考标准的权重,综合可得到最终的方案确定/优化。

1.用户调研结论

大部分设计师和产品经理都很难代表最具有代表性的目标用户,我们的角色是尽可能的理解我们的用户并作出做合理的决策。

但是大部分情况是,我们以专家视角去看待问题,看待设计方案,容易忽视小白用户真正的诉求,忽略最真实最主要的用户使用场景,所以用户调研是我们了解真实用户和真实使用场景的渠道之一。

用户调研数据和结论可以给予我们一些参考,所以我们在做设计决策时,需要考虑用户调研数据。

参考条件:当用研介入的时,在保证用研科学正确的基础上,用研结论要当做重要的参考指标。

参考标准:当用研结论第一的数据超过第二名20%,我们就应该把第一条的结论当做主要参考标准。

2.用户反馈参考标准

这里的用户反馈是从建议反馈、应用商店或论坛等渠道提出的建议,通过这些反馈可以给予我们一些改进意见。

反馈说明:当产品上线之后,肯定会有用户反馈(好或者坏),产品体量越大,则反馈量就越多。我们应该根据用户的反馈占比来作为决策的重要指标。

参考标准:同一种类型的建议占总类型超过30%,当做主要参考指标。

3.灰度测试数据

产品更新迭代时,一般不会全部升级到最新的方案版本,会通过灰度版本慢慢过渡,一般都是先灰度10%然后20%、30%到最后50%,50%以后没问题就全量。

数据参考:灰度测试,新版灰度版本测试的数据和旧版数据对比

参考标准:数据好于之前的数据。则灰度测试当做最重要的参考。

4.三种标准的权重

三种参考标准具有明显的权重排序。一般情况下:灰度数据 > 用户反馈 > 用户调研。

所以参考标准从高到底分别为:灰度数据 、用户反馈、 用户调研。

5.方案确认/优化

1.灰度数据(好于之前) 方案确定。

2.用户反馈(同类型占比30%)产品优化。

3.用户调研(第一名高于第二名20%)产品参考。

有时候一个新需求,由于没有灰度数据,也没有用户反馈,这时候主要参考标准就是用户调研。当后续产品发布后,这时候主要当参考标准就是灰度数据了,其次看用户反馈。

当需求是对当前对产品进行优化迭代时,这时候只能先看用户反馈和用户调研。只有上线之后,才能参考灰度测试数据。

6.总结

每个团队的情况不一样,所以文章中提到的决策指南更需要整个团队共同努力。需要大家的彼此信任,才能更好的将产品设计方案不断的更新迭代做的更好。 查看全部
设计师、产品经理在做设计的过程中,不可避免的会遇到很多的方案决策。

面对众多设计方案时,如何去决策,按照什么标准去决策更有科学性和说服力,这是一个值得我们去思考的问题。

在日常工作中,我们经常遇到这种情况。产品经理完成初始原型图(设计图A)之后,到了交互设计师手上,交互设计师将产品经理的一些方案重新改了一遍,变成了现在的交互文档(设计图B)。

视觉设计师将交互文档按照自己的理解,重新做了一遍调整,变成了视觉稿(设计图C)。

最终的视觉稿在开发阶段,开发觉得不好,又和产品经理沟通,又改了一遍,形成了设计稿D。

以上这种情况是各个角色根据自己的理解,将设计方案进行修改,最终的设计方案都是在各个角色间妥协,形成一个折中方案。

这种过程造成了设计方案的决策过于随意,那么有没有一套完整的科学方法去决策设计方案呢?

本篇文章为设计方案的决策指南,旨在找到合理的方案去指导设计方案,并给予设计方案一个良好的决策方向。

文章大纲:

1.用户调研结论

2.用户反馈

3.灰度测试数据

4.三种标准的权重

5.方案确认/优化

6.总结

大纲可看出,通过用户调研结论、用户反馈、灰度测试数据三个参考标准的权重,综合可得到最终的方案确定/优化。

1.用户调研结论

大部分设计师和产品经理都很难代表最具有代表性的目标用户,我们的角色是尽可能的理解我们的用户并作出做合理的决策。

但是大部分情况是,我们以专家视角去看待问题,看待设计方案,容易忽视小白用户真正的诉求,忽略最真实最主要的用户使用场景,所以用户调研是我们了解真实用户和真实使用场景的渠道之一。

用户调研数据和结论可以给予我们一些参考,所以我们在做设计决策时,需要考虑用户调研数据。

参考条件:当用研介入的时,在保证用研科学正确的基础上,用研结论要当做重要的参考指标。

参考标准:当用研结论第一的数据超过第二名20%,我们就应该把第一条的结论当做主要参考标准。

2.用户反馈参考标准

这里的用户反馈是从建议反馈、应用商店或论坛等渠道提出的建议,通过这些反馈可以给予我们一些改进意见。

反馈说明:当产品上线之后,肯定会有用户反馈(好或者坏),产品体量越大,则反馈量就越多。我们应该根据用户的反馈占比来作为决策的重要指标。

参考标准:同一种类型的建议占总类型超过30%,当做主要参考指标。

3.灰度测试数据

产品更新迭代时,一般不会全部升级到最新的方案版本,会通过灰度版本慢慢过渡,一般都是先灰度10%然后20%、30%到最后50%,50%以后没问题就全量。

数据参考:灰度测试,新版灰度版本测试的数据和旧版数据对比

参考标准:数据好于之前的数据。则灰度测试当做最重要的参考。

4.三种标准的权重

三种参考标准具有明显的权重排序。一般情况下:灰度数据 > 用户反馈 > 用户调研。

所以参考标准从高到底分别为:灰度数据 、用户反馈、 用户调研。

5.方案确认/优化

1.灰度数据(好于之前) 方案确定。

2.用户反馈(同类型占比30%)产品优化。

3.用户调研(第一名高于第二名20%)产品参考。

有时候一个新需求,由于没有灰度数据,也没有用户反馈,这时候主要参考标准就是用户调研。当后续产品发布后,这时候主要当参考标准就是灰度数据了,其次看用户反馈。

当需求是对当前对产品进行优化迭代时,这时候只能先看用户反馈和用户调研。只有上线之后,才能参考灰度测试数据。

6.总结

每个团队的情况不一样,所以文章中提到的决策指南更需要整个团队共同努力。需要大家的彼此信任,才能更好的将产品设计方案不断的更新迭代做的更好。