《如何让你的设计更有说服力?.docx》由会员分享,可在线阅读,更多相关《如何让你的设计更有说服力?.docx(16页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、我们都知道设计师在工作中,经常防止不了和老板提案或者讨论设计, 这时候,如果你没有掌握一些权威的体验设计原那么,是很难说服力的, 因此今天文章就要解决这个问题。我们继续提供乔恩亚布隆斯基(Jon Yablonski)曾经写一本关于体验原那么的书籍,我挑选一些常用的设计原那么,并集合线上案例与大家提供。#1.共同区域法那么原那么定义:在用户界面中,使用边框或背景色为相关元素创立容器,这 样可帮助用户快速有效地了解UI结构,以及与之相关联的元素。共同区域法那么案例1: apple官网,右侧图片内容区域,通过灰色卡片将内容收拢为一 个组,与其他信息进行巧妙的分组。III u 08:18-r订阅精选发
2、现西行纪完美/J Q员制日。也G)修纪录片原来这么有意思纪录片原来这么有意思行星史诗级科幻进击的大秦,古人的力太阳系史上最大的漫布古代熏科技福秘大美新围城随笔乳鹰长成记 首播一场伊犁河谷的冬春之旅黄荔配音律家三娃成长工更多哥妙圮录片o-腾讯视频搜索功能反面案例:腾讯视频vip页面,换一换间距距离下面内容留白间距大一 些。而首页换一换距离下面内容几乎快靠近一起了。(不知道是不是这 两个设计师打架了,各自定义了间距规那么)纪录片原来这么有意思行星史诗级科幻进击的大秦古人的力太阳系史上品大的瀑布古代黑科技揖秘大美新疆图城随笔飨鹰长成记 首播一场伊颦河谷的冬春之旅黄磊配音展家三蛙成长记更多哥妙记录为你
3、推荐左侧:腾讯视频VIF页面,右侧:腾讯视频首页案例2: Bugs,临近法那么也是排版最重要的原那么之一,Bugs通过较大的 留白来区分各功能模块。.si 台一.si 台一08:49 Q Q喜s 24/7A 4 ssQQ8邛UBugs#4 .米勒定律原那么定义:一般人的工作记忆中只能保存7个(正负2个)工程。在界面设计中,一些关键功能模块,设计元素尽量保持在7 (2)个工程0案例1: apple官网、Medium DesignNews等,网站导航标签数量在9 个以内。设计 女权主义 创造力及贡设计乐* 福 Z*MediumDNDNStories Jobs PodcastLog in / Reg
4、ister Q New StoryDesignNews案例2:vibe在推荐喜欢的歌手时,会控制在一定数量内,比方目前是5个。spotify浏览全部歌单时数量一屏控制在8个。13:44 VPick your favorite artists.Part: Miserere之金物eEtyoi力口。|星WU 口m力mfe三,up卜后三不华训x MUI却茎0|gx(今封普世3人|力督口口13:43 V.ill m WD搜索 Q艺人、散曲或能宫浏览全部排行榜 ; 演唱会 41-E (Vtt CfiQ Q llnvibe&spotify案例3: 11 street在设计功能入口时候都保持在9个以内,右侧图
5、最右 下角更多图标,和其他9个不属于同一个层级。放在这里也是为了视觉 美感和展开更多功能。22:0622:03 , q 口名星7r包号q号智舍.占利主王牙.公玄”ir , q 口名星7r包号q号智舍.占利主王牙.公玄”11ZQ 0善 邮售名里力但号斯72号生舍3毡EEE 71g剪告3 3否日日EEE 71g剪告3 3否日日tep|2iie 3电冬制号 ia?G 三。只。E2V胃的咱1恺4Mwmff目BO 2KIW口01人I隹名着 於包公电。1介33SG 三。只 Q11 street写在最后,UX原那么对于设计师来说是一个指导性原那么,但是我们有时 会因为业务而不得不做一些小的放弃,这个属于正常
6、。这些体验原那么也 并非不可动摇,因此还是需要灵活应用。Today at AppleVirtual SessionsLearn the basics of using Maclive with Apple Creatives.Sign up apple官网案例2: IOS系统中,通过容器将组件进行信息分组,这样我们就能清晰 知道他们之间的关系。IOS系统组件案例3: facebook和appstore通过容器将诸多信息进行分组,这样便于 用户对目前界面结构一目了然。13:28V菜单13:27W.di令Watch视软阳公共主页招,求职新品疫情信息中心收藏央0| 史下 2171711g221 Lf
7、2h CrossWorldsB 1e3m首世力21212旦世力0K)ia|S4世力S1E|5世,展开、?帮助与支持、承设与隐私、=左 Facebook, 右 appstore#2 .相似法那么原那么定义:使用相同的特征表示元素之间的关系,如相同的颜色、形状 或大小它们被认为是相关的,而看起来不同的元素被认为属于不同的 组。形状分组颜色:应用相同颜色来表示某些元素是相关的,比方,它们可能具有类 似的功能。相同的颜色往往比其他特征(例如形状)更突出,因此可用于将不同类 型的元素结合起来,并传达它们确实是相关的。颜色分组A即使我们将颜色打乱位置,同样也会认定它们是相关的颜色分组B案例1: Naver
8、界面中,相同形状的标签图标,我们认定为具有相同的属性,通过填充颜色表示这些已经被加入收藏标签。06:53可.til 址呈7闭01 X心4Qw*l0幺主Q TVF3加5Q凹0|w金思R Li|0|Hj7|3州, ,甘呼会思己科叫6Qssn R Qm RNaver案例2: Behance界面中,相同形状的圆角矩形按钮,我们认定为都是可 点击的,通过颜色区分它们之间的层级关系,我们会认为蓝色按钮是主 要按钮,优先级也最高。/颜色全部)镜头全部全部焦距全部Q图像类型全部建议应用Na ver或者在上面案例3:当形状一致时,通过尺寸大小来表示相似性关系。添加其他形状样式。如下列图中,标签长一些的且带有圆形
9、头像,我们认为它们具有相同属 性,比方是重点推荐的对象。07:05 V.ill 令 CLMIXI援生目刊Q 0召,3鬟曾引研MaQ0171 4 口 川川-1愕的A5口早号 召早 乜川世导不有硼3为力是色 UNEDUCATE.也UBtl (APRI.2旦日公伍)更NX (Beenzi.3&18 巨品巨生品Wl”品U升含己二母C M克里力Melon案例4:腾讯视频,猜你喜欢标签,形状样式相同,虽然它们间距相等, 但是我们会将颜色有差异的进行分类,会认为它们很特殊,或者重要性 更高。08:26 寸.di e ”精选 射雇 VIP福利社电视剧电? QMl血龙翼I诀动态漫画斗罗降龙觉醒大陆外传神界猾你喜欢的标签国际禁 #动物生存 群众电0人文 上海美 ,中国电G换一换值得细细品味的内容腾讯视频#3.临近法那么原那么定义:彼此靠近的设计元素被认为是相关的,而间隔开的元素被认 为属于不同的组。接近性是最重要的分组原那么之一,也是比拟强视觉线 索,例如颜色或形状的相似性。在UI设计中,相同功能放置比拟近的位 置,不相关的距离较远。案例1:腾讯视频,搜索功能和其他4个功能通过大间距将其分开,凸显 其重要性。另外4个功能间距相等,虽然功能不同,但是我们认定它们 等级程度相当。