<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

      您的意见是我们 UI 中国进步的动力!
      点击立即反馈按钮,发表您的意见!
      立即反馈
      QQ群反馈
      您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
      群号:302892100
      备注:反馈问题后@管理员能让我们及时了解您的意见

      设计师须知的?#35745;?#35774;计那些事儿

      原创文章 分类: 经验/观点 版权:
      16206 416 426 21
      2019-03-07
      123.1
      首页推荐

      这是今年产出的第二篇文章,今天给大家分享的是关于?#35745;?#35774;计的那些事儿,希望对你有所帮助。

      Image title


      这是今年产出的第二篇文章,今天给大家分享的是关于?#35745;?#35774;计的那些事儿,希望今天的分享可以让你知道?#35745;?#30340;重要性以及?#35745;?#22312;设计中的一些基本的处理技巧。




      Image title


      ?#35745;?#22312;设计中的定位就如同一个人的衣着品味,不同的穿衣风格会使别人对你作出不同的判?#24076;?#20026;你打上不同社会属性的标签。随着用户对各类体验的不断升级,商家也在各种细节上面不断优化,对于?#35745;?#30340;要求也不断加以重视。今天给大家分享的就是关于?#35745;?#30340;那些事儿,希望可?#28304;?#32473;你更多帮助。




      Image title


      本文将从?#35745;?#22312;设计中的重要性开始解析,加强大家对?#35745;?#30340;认知;再从?#35745;?#27604;例、后期处理技巧、设计中的运用须知等方面分享关于?#35745;?#22312;设计中的处理经验;最后也会分享一下我们在寻找合适的?#35745;?#36807;程中的方法与后期图库的管理经验。




      Image title


      相信?#35745;?#22312;设计中的重要程度对于设计师来说已经了然于胸,虽然大家都会选择更好的?#35745;?#36164;源来进行设计,但是依然还有很多需要设计师注意和把控的地方,下面我们一起来看看。



      1.1、提高?#35745;?#30340;质量

      越来越多的产?#33539;醞计?#36136;量开始加以重视,?#28909;?#32593;易严选对产品?#35745;?#30340;拍摄与处理?#21152;?#20005;格的规范,目的就是为了提升产品气质和在用户心中的印象。我们在设计的时候更要以最佳的?#35745;?#26469;烘托我们的设计稿,?#35745;?#30340;质量影响着整个设计的格调。


      Image title


      在产品设计中,很多伙伴儿会觉得?#35745;?#37117;是后期运营上传的,我设计稿做得再精美最?#25214;?#26159;没用的。对于这个问题我的观点是这样的:

      a. 最佳的设计输出是设计师专业的体现;

      b. 把最好的效果呈现给决策者,增加他对你设计能力的印象;

      c. 通过制定运营视觉规范来把控?#35745;?#36136;量,是可以严格把控你对?#35745;?#30340;视觉追求;

      d. 你的态度会给你带来好运。



      1.2、?#35745;?#30340;真实还原

      虽然前面提到?#35745;?#36136;量的重要性,但是我们不能为了视觉效果选择一些与主题无关的配图,这样也会给决策者一种误导。我们可以提高配图的质量,但是需要保证?#35745;?#30340;真实还原,这样才能让你的设计作品更加真实合理。


      在一些本土的产品设计中,对于国外?#35745;?#32032;材的运用,需要谨慎?#28304;?#22914;案例中的模特形象,文案信息的传达更加偏向于国内的场景,如果运用一张国外的模特素材也许?#32856;?#26356;高,可是却无法真实的还原产品场景,会给决策者传达一种错误的认知。


      Image title



      1.3、?#35745;?#29256;权须知

      关于版权这个问题往往还有很多设计师不以为意,要嘛是压根就没注意这个问题的重要性,要嘛就是抱着侥幸心理。我们在工作中作为专业的设计师,不仅需要保护和维护自身权益和公司利益,对于作者的尊重也是基本的职业素养。


      在项目中面对?#35745;?#29256;权问题我们要主动告知需求方,这样我们尽到了职业义务,也让需求方能够做出正确的判断。




      Image title


      在对产品界面进行布局的时候,?#35745;?#30340;比例往往被大家所忽略,凭着自我感觉任意选择一个整数数值进行设计,在多个地方出现相同内容?#35745;?#30340;时候也会尺寸混乱,这样无形中增加了前后台的规范性和存储压力。


      下面从项目中常用的?#35745;?#27604;例和需要注意的地方给大家进行分析,也给大家分享一下?#35745;?#27604;例的选择方式,在整套产品设计中需要保持的一致性等方面。



      2.1、?#35745;?#27604;例有什么讲究

      不同比例的?#35745;?#25152;传达的信息主体不尽相同,根据产品属性我们会选择与之相符的?#35745;?#27604;例进行整体的界面布局。


      通过体验一些主流的产品,我们会发现一些比较常用的?#35745;?#27604;例,如 1:1、2:1、3:1、3:2、4:3、16:9、16:10 等等;也会发现一些打破常规比例的设计,我们需要分析它们的性格,结合自身产品的特点,才能在自己的产品设计中合理的加以运用。


      Image title


      下面选择几个常用比例进行分析,希望抛砖引玉,带给大家更多的思路。



      1:1 强调主体的存在感

      1:1 的?#35745;?#27604;例是比较常见的一种设计比例,利用此长宽比更容易将构图归整得简单,突出主体的存在感。常用于产品展示、头像、特写展示等场景,在电商类产品中尤为常见,如:?#21592;Α?#32593;易严选、网易考拉等。


      在产品设计中通常以两栏或以上为主,通栏展示的情况?#35805;?#29992;于商品详情页头图部分展示居多,其余界面布局较少利用通栏展示。


      Image title



      4:3 图像紧凑、更易构图

      4:3 的?#35745;?#27604;例可以使图像更紧凑,更易构图,方便设计师进行发?#21360;?#30001;于手机屏幕容量较小,作为全屏展示时,该比例在产品设计布局上面占用?#21344;?#36739;大,通常我们作为分栏来进行界面布局。


      作为设计师来说,这个比例经常接触,UI中国、Dribbble 等的作品封面,在携程、厨房故事等产品中也均有采用这个比例。


      Image title



      16:9 电影场景般的效果

      16:9 的?#35745;?#27604;例可以呈现电影场景般的效果,多用于横向构图,是应用非常广泛的尺寸比例之一,能给用户一种视野开阔的体验。在很多影视娱乐类产品设计中运用广泛,如腾讯视频、网易云音乐等。


      Image title



      16:10 拥抱?#24179;?#27604;例

      ?#24179;?#27604;例就像金字塔上的明珠,越接近她?#25509;?#39749;力,反之会魅力减弱,16:10 的?#35745;?#27604;例最为接近。设计没有绝对的标准,我们可以遵循一些?#21028;?#30340;经验规则,但是也要敢于突破规则,尝试更多的可能性。


      Image title



      X:≤Y 瀑布流设计

      X:≤Y 代表宽度固定,高度在最大值之间自定义的瀑布流设计,在一些用于用户没有很明确的目的,只是?#19981;?#33719;取尽量多的信息的情况下采用这种设计方式。X:≤Y 的?#35745;?#27604;例要注意高度的控制,最大值不要超出屏幕?#19978;?#31034;区域的范围。


      Image title


      以上列举的仅为部分常用比例的分析与说明,还有更多的比例这里就不一一演示,分享的目的是让大家养成分析的习惯,结合自身产品特点选择适合的?#35745;?#27604;例。



      2.2、?#35745;?#27604;例选择方式

      a. 以商品展示效果为准,选择能够充?#30452;?#29616;商品特点的?#35745;?#23637;示比例;

      b. 以产品气质为准,选择符合产品内容气质的?#35745;?#23637;示比例;

      c. 结合产品特点选择合适的常用比例;

      d. 根据版面布局灵活的自定义特殊的比例值;

      e. 分析→打破→创新,创造出符合?#25345;止?#24459;或者美学概念的比例值。



      2.3、?#35745;?#27604;例的一致性

      当我们结合产品特点?#33539;?#21512;适的?#35745;?#23637;示比例以后,需要针对整体的布局与?#35745;?#20998;布情况,规范出那些布局可以采用相同的?#35745;?#23637;示比例。在保障视觉效果与交互形式的情况下,相同的主体,在不同的页面中最好采用相同的比例呈现,这样的好处不仅可以保持视觉表达的一致性,也能给后期运营维护带来便利。


      Image title




      Image title


      如果说公司有专业的摄影团队,那么对于?#35745;?#30340;需求相对会很容易满足。对于大部分的团队来说设计师找图与处理?#35745;?#37117;是比较日常的工作,在产品设计里面,虽然不一定能够达到专业修图师的精修标准,但是比较常见的处理技巧还是需要掌握的。



      3.1、?#20204;?#31616;化?#35745;?/span>

      在项目中,我们会通过一些图库网站去寻找合适的配图,但是想要刚好满足还是比较难的,对素材进行?#20204;?#26469;突出我们想要的部分是比较简单的?#35745;?#22788;理技巧。


      实际生活中拍摄的照片总会出现很多干扰主体的内容,?#20204;?#25481;多余的内容突出主体信息,?#20204;?#21518;的?#35745;?#26500;图更紧凑、凝聚,主体更具吸引力。这也是我们说的对?#35745;?#36827;行降噪,排除多余的干扰。


      Image title



      3.2、相同尺寸的?#20204;?/span>

      当系列?#35745;?#36827;?#20449;?#29256;时,需要保持?#35745;?#27604;例尺寸的统一性,当我们在多个?#35745;?#32032;材之间进行?#20204;?#22788;理时,需要以最小?#20204;鋅占?#30340;?#35745;?#20026;示例去?#20204;?#20854;它?#35745;?#36825;样才能保证最终的展示效果。


      如果是人物?#35745;?#38656;要注意人物眼睛的视平线,让眼睛的位置尽量保持在水平线左右。


      Image title



      3.3、视平线作为水平线的基准

      当我们在选择人物?#35745;?#30340;时候,一张特写镜头能传达一种眼神与眼神交流的感觉,在进行?#20204;?#30340;时候要以视平线为准进行缩放?#20204;校?#21487;以保留眼神的交流感。?#35745;?#25918;得越大,眼神的交流感就会越强。


      Image title



      3.4、调整?#35745;?#30340;垂直线

      我们在选择?#35745;?#30340;时候,如果是如同城市建筑等类型的垂直主体时,我们需要注意主体物与地平线的垂直关系。如果构图特意需要倾斜的效果另当别论,否则我们将会优先考虑这个因素,选择主体垂直的?#35745;?#25110;者后期微调让主体垂直地平线,这样整个画面更加协调稳定。



      3.5、调整?#35745;?#30340;地平线

      在选择?#35745;?#26102;如果有明显地平线的照片,需要注意地平线是否平行。地平线的平行将会有助于画面感的协调,如果遇到想要体现特殊效果,如体现速度感、突破画面张力、营造不稳定性、强化某种视觉效果等,也会特意打破地平线的平行。在调整地平线平行时,可以通过软件的变形工具等对?#35745;?#36827;行后期处理。



      3.6、通过局部来强化主体

      有时候一张普通的?#35745;?#24182;不能引起我们的注意,但是我们通过局部放大突出单一的主体特征时,往往可以获得更好的视觉效果。放大后的主体构图更加饱满,视觉效果更强烈。


      Image title



      3.7、局部特征的极端运用

      局部特征放大到一定程度的时候主体信息会被淡化,为极端的处理方式。这样处理出来的?#35745;?#20027;体将会无法识别,极端的?#20204;?#26041;式常用于背景的使用。我们?#37096;?#20197;通过 Photoshop 软件的高斯模糊等工具进行处理,形成一些特殊色彩融合的背景?#35745;?/p>


      Image title



      3.8、三分法

      在进行?#35745;们?#30340;时候,不一定需要总是将视觉主体放置在画面中心点,将视觉主体放置在三分处也许可以增加更多乐趣。如果?#34987;?#38754;中主体是人物时,可以考虑将人物主体或者视平线放置在三分处。



      3.9、避免接近人物发际线

      面对一些人物?#35745;?#26102;,我们在进行?#20204;?#30340;时候需要注意人物的发际线。在?#20204;?#20154;物发际线时就会联想到?#21644;罰?#22240;此不要太靠近人物发际线,留下足够的头发,不要过度?#20204;校?#20197;免影响人物形象。


      Image title


      以上作为常用的处理形式列举,更多的形式希望大家多多的总结,在设计中考虑到每一个细微的元素差别。




      Image title


      噪音会对我们的生活造成干扰,降低噪音,我们?#19981;?#23433;静的环?#22330;?#23545;于?#35745;?#30340;处理也有降噪的说法,可以让画面感更加简洁,主体更能凸显。


      下面给大家分享一下找图前的降噪思考和后期处理进行降噪的经验。



      4.1、找图前的降噪思考

      在选择?#35745;?#30340;时候,要尽量选择主体表现突出,没有过多信息进行干扰的?#35745;?#25105;们要明?#20998;?#39064;,寻找的?#35745;?#35201;能单一的表现这个主题,如果一张?#35745;?#20013;表现多个信息源的时候,会给人一?#20013;?#24687;干扰。


      我们在拍摄商品展示图的时候就是考虑这个因素,尽量用最简单的背景来衬托,其它的物体元素仅仅作为装饰出现,不会抢占主体物的呈?#20013;?#26524;。


      Image title



      4.2、设计软件的后期处理

      有时候?#35805;?#27861;通过自?#20449;?#25668;获取?#35745;?#25105;们在通过图库网站寻找?#35745;?#30340;时候也不一定刚好达到心中的标准,通过设计软件的后期处理是最为常见的方式,通常运用 Photoshop 软件居多。



      4.3、利用去底来进行降噪

      对于一些背景比?#26174;?#20081;的?#35745;?#25105;们为了更加统一视觉效果,让主体更加突出,会通过去底来进行降噪,特别是在展示商品?#35745;?#30340;时候较为常用。


      去掉底色后?#35805;?#20250;有几种处理方式来衬托主体:

      a. 以白底的形式显示,这个比较常见,有时候为了让?#35745;?#30340;外轮廓出现也会加一个?#25104;?#30340;描边;

      b. 设置一个固定值的浅灰色,这样处理也能形成视觉统一,还能让?#35745;?#30340;外轮廓清晰,也有通过品牌色融入调出的一个偏向于品牌色的?#25104;?#20316;为背景;

      c. 根据?#35745;?#20027;体的配色反推出?#25104;?#32972;景的配色,通常是以降低色彩明度与饱和度的形式;

      d. ?#35745;?#21435;底后利用深色作为背景,这个?#35805;?#27604;较少出现,需要运用?#35805;?#20026;品牌色、深灰色、黑色等。




      Image title


      通过以上的一些分享我们可以掌握对?#35745;?#30340;基本处理方式,在进行运用的过程中会有一些需要注意的地方,?#28909;?#20851;于结合卡片式布局的时候内外?#27493;?#30340;关系以及对?#35745;?#35774;置?#38431;?#30340;注意事项等。



      5.1、内?#27493;?#19982;外?#27493;?#30340;处理

      现在很多产品在布局上面都在运用卡片式进行布局,如果对卡片进行?#27493;?#35774;置以后,对于卡片内部的?#35745;?#36890;常也会设置一点小?#27493;恰?#35774;置的数值由卡片外?#27493;?#25968;?#23548;?#21435;它们之间的间隙数值,如果算出来的数值为负数的情况,原理上?#35745;?#19981;做?#27493;?#20540;设计也是可以的,只是为了整体风格的统一,我们通常会设置一个小?#27493;?#25968;值。


      Image title



      5.2、?#35745;?#30340;?#38431;?#35774;置

      我们进行设计的过程如果是需要不断更新的?#35745;?#25105;们通常不建议设置?#38431;埃?#22240;为?#35745;?#37197;色风格、色?#26102;?#37325;、明暗程度等不同,都会影响?#38431;?#30340;效果。


      在相同?#38431;?#21442;数设置的前提下,?#25104;?#39118;格的?#35745;?#20250;显得?#38431;?#37325;,深色风格的?#35745;?#20250;显得淡。这样的反差会影响我们对?#35745;?#30340;选择,但是如果?#35745;?#37117;是用户随机上传的,我们是很难进行控制的。


      如果是在一些特殊固定的场景,?#35745;?#37117;是设计师可以把控的前提下,我们可以根据?#35745;?#30340;情况不同来区别?#28304;队?#30340;参数。


      Image title




      Image title


      掌握了各种?#35745;?#22788;理的技巧,但是能够?#19994;?#26356;加合适的?#35745;?#36164;源,将会大大降低我们的处理工作量,也能带来更好的效果。找图相?#21592;?#36739;耗费时间,大家在平时要利用空余时间多进行体验,看到质量好的?#35745;?#20808;进行分类收藏,需要的时候可以根据分类去寻找。


      我们不仅要善于利用图库网站和关键词发散来进行找图,也要养成良好的习惯,可以关注更多的优质画板,?#37096;?#20197;创建属于自己的图库资源。



      6.1、正确地利用各类网站资源

      现在图库的网站也很多,我们在选择?#35745;?#30340;时候也要注意版权说明,可以下载使用并不代表作者进行了原创授权,在进行商用的时候还是需要了解详情,找一些具备正版授权的正规平台。


      当我们在一些平台发现优质的?#35745;?#36164;源时,可以进行采集和分类,如果?#35745;?#26377;编号,可以在存储的时候把编号备注在名称上,方便以后需要高清大图时可以通过编号进行搜索。


      我们在利用图库网站搜索?#35745;?#30340;时候可以利用?#35745;?#20449;息筛选更大尺寸;利用相似?#35745;?#21151;能可以搜索更多类似资源;点击?#35745;?#21487;以进到原始出处,可以?#19994;?#26356;多系列主题下的资源。在百度识图、?#31350;?#28023;洛等平台里面,设计师可以利用以图搜图功能在图库里面找?#26696;?#28165;正版?#35745;?/p>


      Image title


      推荐一些常用的欣赏?#35745;?#30340;网站给大家:500px、1x、Pinterest、unsplash、foodiesfeed等等。网站很多,其实很难都在用,根据自己需求选择性使用就好。



      6.2、巧用关键词发散

      现在找?#35745;?#30340;网站很多,但是我们要善于进行一些关键词发散,有些资源直接搜索不一定能够?#19994;?#26356;合适的。


      举一个简单的例子来说一下关键词发散的作用,?#28909;?#22278;形和香蕉是没有本质联系的,但是通过关键词发散就会产生关联,圆形→西瓜→水果→香蕉。换到?#35745;?#36164;源中来原理相似,?#28909;?#25105;们要找一张美女?#35745;?#19981;一定搜索的关键词是“美女”,这个关键?#24335;?#34892;发散可以衍生出时?#24615;又尽?#34903;?#25721;?#27169;特、气质、时尚大片、穿搭等等关键词,这样通过发散出来的关键词也许能?#19994;?#26356;加符合的?#35745;?#36164;源。


      Image title



      6.3、关注?#36861;?/span>

      有时候同样的方式找图和设计,但是每个人的审美和设计感觉都不一样,也会影响最终作品的效果。方法技巧都可以短时间来提升,但是设计感觉是需要长时间进行熏陶的。我们可以关注一些?#21028;?#30340;设计师,关注他们创建的画板和分享的资源,?#30431;?#20204;的审美能力成为你的一层过滤网,为你筛选一些劣质的资源。


      我们?#37096;?#20197;通过老司机们关注的设计师或者画板来寻?#39029;?#26356;多的优?#39318;?#28304;,通过关系链可以让你认识和发现更多?#21028;?#30340;设计师。



      6.4、创建自己的图库资源

      很多设计师会忽略日常资源采集的重要性,总是在需要的时候才去寻找想要的资源,但是总会徒劳。也有很多通过一些途径一次性获得上百G资源,内心满是喜悦,以为从此设计无忧,却不知后面似乎也没啥用……你肯定还有更多这样类似的情况。


      俗话说有备无患,养成良好的设计师职场习惯很重要。日常的采集习惯将会大大提升设计师后期的项目设计灵感来源与执行效率,设计做不好其中部分因素就是灵感素材没有找对。


      建立灵感图库相当于形成一本字典,当你需要的时候可以进行查询;闲暇的时候可以进行回顾,去挖掘一些?#21028;?#20316;品背后的轨迹,以便能够运用到后期的项目中,提升工作执行效率。


      Image title


      之前写了一篇相关的文章《设计师如何创建灵感资源库》,有需要的伙伴儿可以阅读了解。


      随着用户对体验的要求不断提升,我们需要从各个方面加强设计细节,?#35745;?#36164;源的好坏不仅传递的是商品的品质,也能够体现产品的格调。希望今天的分享可?#28304;?#32473;大家对?#35745;?#30340;认知,在后期产品设计的过程中可以考虑得更全面,最后?#34892;?#21508;位酷友的支持,如有补充?#38431;?#30041;言互动。


      作者:黑马青年(黎波)

      本文由 @黑马青年 原创发布。未经许可,禁止转载。

      微信公众号:行设视觉

      黑马青年

      设计交流微信:heimaui

      15358粉丝/125关注

      2016年度最佳作品集TOP10得主国民爱豆2017年度最佳作品集TOP10得主首页霸主2016年度最佳作品集TOP50得主
      原来这就是UI设计师的门槛设计师如何创建灵感资源库
      6
      L_Zhou

      道理我?#32423;?#35828;的也挺好的,但是那个16:10的比例我是真的不能认可,你?#29992;?#23398;上考虑是觉得?#27599;矗?#20294;是实?#35270;?#29992;中呢?90%的海报和视?#21040;?#22270;比例都是16:9的常规尺寸,你这长了一截子,开发也不能拉伸,只能?#35745;?#25972;体放大然后再居中显示,不说画面被?#20204;校?#36825;个多余的工作量开发也不会认可,有时候还会出bug,?#35745;?#26174;示异常之类。。。?#27604;唬?#20320;要是举例自己做的其他应用,那种大部分?#35745;?#26159;自己提供的或者用户自主裁剪上传的,我没意见,但是这种视频类的,还是不要太过创新的好

      精彩!

      扫描二维码
      去手机端查看海报

      黑马青年

      TA已经获得20枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>