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

从零到壹,让思路更稳妥

原创文章 分类: 经验/观点 版权:
15263 275 415 21
更新于:2018-12-16
109.7
首页推荐

Image title

前言


近期有一位朋友问我“什么是设计风格?”,在沟通了解之下,原来是他承接了一款全新的移动端项目,不知该从何设计。这位朋友是刚入行的新人,从0-1的设计对他来说是很难把控的,但是对他却是一次不错的经历。


正好我承担的主要项目是从0-1,今年3?#36335;?#36824;经历了一次2.0设计大改版。这款产品是我独立设计,基本是全栈负责,所以把整个设计过程的思考总结分享出来,一起学习一起共勉。

进入流程

l 了解业务

在设计之前,一定要给自己争取时间进行设计准备工作,而不是一拿到交互就上手设计,无思考的设计是没有灵魂的。

在接到任务后就要立马了解业务,知晓产品方向,熟悉用户画像?#35748;?#20851;信息,了解这些信息后,在后来的设计中,更能站在用户的角?#28909;タ创妥?#32467;设计问题。

能最快了解到业务动向的是产品经理那里,当产品经理和交互对接需求的时候,设计师尽量参与到讨论当中,而不要等到交互评审的时候才去了解业务。

如果你的项目有竞品,那这个资源真的是得天独厚,它能够让你迅速了解产品的商业规划。当然,最好对竞品进行分析,不光从设计,也要从它的体验和页面之间的跳转进行思考。这些过程的积累,能?#35805;?#21161;你更好的了解交互的内容,在交互中发现问题,提出自己的观点。(这里不是说让你去找交互的茬,而是在设计过程中,你能够对交互的设计有疑问,多与交互进行讨论,这样能够扩展设计思维,联想更多的用户使用场景)。


l 设计思考

设计的操作,不仅局限于界面的内容,在设计的前期准备中,结合前期对业务的了解,在现有不足的需求内容里,可以先进行风暴式设计(前期飞机稿),有准备的设计,在进入到正式设计后,能够有备无患,更快的进行调整。设计的前期准备我们可以从3个点入手:


Image title


一、颜色

颜色是整个产品的灵魂,是与用户最直接的沟通对象,恰当的使用颜色,能够更准确的引导用户的操作。


在制定颜色的时候,首先考虑的是品牌色,就是产品最主要的代表色。内容色或者其他辅助色,可以在设计中,进行添加或者调整。


Image title


·  品牌色


1、有品牌色

已有品牌色,是可以直接运用到设计中,除了原有的品牌色,还可以根据页面的整体视觉需求,制定合适的辅助色,辅助色?#35805;?#26159;用于区分不同标签、icon、内容?#21462;?/span>

Image title


2、无品牌色

品牌色是被赋予意义的,一期制定后,将会被长期沿用,运用到所有与企业相关的衍生内容,未来基本不会有很大跨色?#24403;?#21270;,所以在制定品牌色要很慎重。每个颜色代表的意义是不一样的,?#34892;?#39068;色也是?#25215;?#34892;业的代表色,所以品牌色可以根据行业类型去制定:


Image title


?#37096;?#20197;根据用户类型制定品牌色,OFO小黄车就是典型的例子,打造年轻阳光时尚的骑行平台,而黄色就是给人轻快,充满希望和活力的感觉。


Image title


还可以根据平台自己想给用户带去什么样的感觉制定,这种方式最好是能够有很多用户进行体验验证,因为颜色是最直接的视觉体验传达,所以这种方式制定,要更为严谨。


我在项目中遇到的用色问题和思路:


问题:
品牌logo的代表色来自某戒网比赛提供,品牌调性不规范,无衍生产品,个人对项目了解不?#36171;梗?#26681;据自我喜好,定下深红色。

思路:
其实遇到这种类型的问题,应该同时考虑平面方面的知识,颜色是否适合该产品,未来的线下物料是否适合承载物。

我负责的项目目标用户是卡车司机,为了平台宣传,卡车上会贴一些车贴,卡车的颜色有很多,深红色和蓝色是很常见的。但是第?#35805;?#30340;项目代表色是深红色,在同是红色系的冲突下,则需要调整多种车色同时适用的代表色,所以在项目1-2的设计改版中,?#19994;?#25972;了品牌色。


Image title


有人会有疑问,为什么定个品牌色还需要考虑线下使用场景?前?#36824;?#35774;计总监曾举过一个列子:当初他在黑莓任职,需要开始创建一个新的手机操作系?#24120;?#20174;他们最开始的第一天就把工业设计、包装设计、用户界面以及市场等全部的核心整合在一起,?#21019;?#36896;一套全新的用户体验。这是一个很好的例子,要永远将设计看作企业品牌的一部分

我们在着手界面设计的时候,需要考虑你所能想到一切的使用场景,颜色是影响用户第一元素,形成的产品形象是一直影响品牌形象的,所以在制定代表色一定要考虑的更全面。


·  内容色


我?#35805;?#25226;字体、背景、分割线等用色分为一类,这类颜色用的比较多的是白到黑色之间色。我定义的颜色都是100%?#21487;?#30452;接使用颜色的数值。


Image title


也有设计师?#19981;?#20174;#000000纯黑色,调整不同的?#35813;?#24230;使用,有?#35813;?#24230;的颜色在不同颜色背景上会有不同的视觉效果,所以色值在提供给前端人员的时候,还需要进行调整。内容色的制定方法就看设计师的个人习惯来调整了,只要能正常进行开发,视觉效果保持一?#24405;?#21487;。


Image title


在根据交互设计稿设计页面的时候,要理解内容的层级,合理的使用颜色。标题/主要内容/提示文字/icon等用色,都会对用户产生不同的视觉指引,找?#24605;?#23478;社区的界面设计,可以看到不同内容的颜色深浅都是不一样的,整个视觉是有层次的,所表达的内容也清晰明了,突出重点,弱化?#25105;?#20869;容


Image title


颜色参考学习文献--甲方竟敢?#30340;?#30340;配色丑! 我来教你怼回去》


二、 风格


近年来,大量留白的极简平面风格流行于各大互联网平台,我们需要在趋于一致的风格中找到自己的设计风格,可以从这几个点进行思考:


1、浏览竞品的设计,有助于区分自己的设计想法,从竞品设计中脱离。 
2、多看其他产品的界面风格,激发设计灵感
3、运用网格系?#24120;?#21019;造合适的视觉样式,规范设计原则。
4、带入品牌元素,有助于品牌的宣传
5、加入情感化设计,拉近产品与用户之间的距离。

从0-1的设计任务量是很大的,需要规划设计节点,可以先从底部tab的几个主要内容先行设计,在设计中,需要从3个主要视觉层入手:


Image title


·  图标


界面设计中的icon的设计会提高整个界面的视觉和用户好感度,iocn的风格有剪影图标、轻拟物图标、轻质感图标、文字图标、叠加图标、插画图标、拟物化图标。


Image title


其中,剪影图标、轻质感图标、插画图标比较常见,插画图标多用于节日类型的宣传、游戏类app。拟物化、轻拟物图标的流行趋势比?#26174;?#24180;了,个人认为轻质感是拟物简化的样式。叠加类图标,?#23548;适?#20110;一种创新类样式设计,不同颜色、线条、或?#35813;?#24230;叠加的视觉样式。


icon设计的风格最终还是由设计师自己最?#31449;?#23450;的,如果在时间充裕的情况下,设计师可以运用常用的图标样式结合产品特点设计出2-3版的飞机稿和团队人员进行讨论,图标的设计风格上要保持统一性原则。

举例:


三大外卖美食类产品的设计都具备自己的设计风格,从产品的首页的功能区域就很好能区分出来,项目的功能区是核心区域,通常占据屏幕的22%~25%,该板块是各类子板块的入口,为子板块引导流量,从用户的视觉来讲,?#26790;?#32622;是?#24179;?#21306;域,所以业内也有称为“金刚区”。


Image title


三款产品的用色总体都是鲜艳明亮的,饿了?#20174;?.5D的设计,贴近拟物设计,增加了细节,能影响着用户的潜意识,联想到?#23548;?#30340;画面。

大众点评的设计是后来新改版的,第一感觉就是时尚,年轻。当时首页刚出来的时候,在某网有人说过,首页的设计颜色艳丽过于喧宾夺主,其实从首页的每块内容区域去分析,现有的?#35745;?#23610;寸是750*1334的尺寸,金刚区、运营区、推荐区基本平均?#21152;?#20869;容区的1/3,在大屏幕的情况下,推荐区可视内容会变大,并且大众的用户使用目的性很强(查看推荐内容、搜索店铺付款等),所以金刚区需要新颖的视觉为其他子功能引流。

美团的icon设计个人认为是比较普遍的了,设计稳妥,相对于其他两款设计,图标?#19988;?#21644;识别度上相对?#20808;酢?br>
对于从0-1的设计过程,金刚区的设计可以先使用普遍的设计方式,因为金刚区?#35805;?#37117;是可配置的(icon可换),上线后,可以再更深入的思考创新。


·  规范


设计界面时,一定要量化设计规范,了解所承担的产品适合哪种设计风格。在设计过程中,可以利用网格系统科学的设计界面,很多设计师都会忽略网格的使用,网格系统是设计的骨架,将界面中的元素?#34892;?#30340;组织,使整个页面的设计更加的规范、视觉一致,提高了工作效率。

网格参考学习文献--?#24230;?#20309;利用网格系统科学地打造APP界面》


为了便于组织设计组件规范,在设计过程中,逐步把字体、?#35745;con等颜色尺寸,内容之间的距离,列表的高度等设计样式单独列出来,如果一开始就制作规范,后续的页面很容易无法沿用。设计图可以用[email protected]的图设计(375*667),导出的图标是[email protected][email protected],当然?#37096;?#20197;使用[email protected]图设计,这个看设计师的习惯和团队的设计规则。


Image title


制定规范不仅是让设计师使用,它更大的作用是方便整个设计团队和开发团队之间的沟通,协助开发人员撰写统一的组件库,未来开发的时候能够直接调用。现在UI设计师设计界面的软件大多都用sketch了,sketch中的symbol的功能能够更方便设计调用组件,提高使用的效率。

symbol参考学习文献--《这样使用Sketch的Symbol功能,能极大提高你的工作效率!》


安装步骤:


1、将组件都分类命名,间隔的符号都用“ / ” (如list/...) ,sketch对其他符号可能会无法识别。



Image title

2、将组件库文件放在一个固定的位置,桌面或者其他文件夹中,点击“Add Library”找到组件库文件,千万不要删除,每一次组件库文件更新都需要重新再安装一次。


Image title


组件参考学习文献--《蚂蚁金服设计平台》  《ant design》


设计制定组件之间的距离大小,组成的界面给用户的感觉是不一样的,距离大,留白多的界面,给人的感觉会很高?#24605;?#27905;,但是整个页面的内容展示相对就会减少。


Image title


这两款产?#33539;际?#20110;资讯类,资讯类设计在我们的印象里是一个页面尽可能多展示几条内容。第一款产品轻芒杂志使用卡片式的设计,卡片内的标题、内容、操作的距离都是比较大的,整个设计风格比较高端,除去顶部状态和底部?#24049;劍?#22312;1334px宽度里,展示内容不满3条。


网易新闻加上顶部状态、?#24049;?#21644;底部?#24049;劍?#25972;个整个可视内容还能达到三条半。网易的多内容展示,让用户感觉到资讯内容丰富,更有阅读和翻阅的欲望。


轻芒的视觉很有自己的风格,设计很小众,与同类产品形成明显的?#21592;齲?#23427;的设计风格也是根据用户特性去定制的。轻芒杂志以兴趣来组织内容,而你看到的内容都是经过有品位的人挑选出来的,所以轻芒的大部分用户是高端有品位人群,这类人群对性冷淡风格很是care。


我们在设计的时候,不能一味的为了?#27599;?#32780;?#27599;矗?#20294;也不能因为用户接地气?#22949;?#30340;很low,我们应该在他们的审美中找到平衡,在未来改版中,逐渐的加入更多的美学元素,冷不丁的提高着他们的审?#39304;?/span>


·  情感


建议APP内的插画部分在功能页面完成后设计,先提供主要的设计流程稿,让前端人员更早的进入开发。

插画部分有金刚区、引导页、启动页、空白?#31243;?#31034;、底部tab等,启动页、引导页、空白?#31243;?#31034;则是能加入更多情感元素设计的页面。有很多UI设计师的视觉插画能力是不足的,作为设计师,我们的主要职责是更应该重视视觉层,它不仅是产品设计中重要的一部分,也是设计师个?#22235;?#21147;的体现。

1、启动页


启动页是APP启动过程中第一个见到的页面,这是启动过程中必然存在的一个页面,所以需要放一张图替代启动中的空白。作为与用户第一个照面的内容,最好就是宣传企业文化,logo和宣传标语,就是给用户最好的自我介绍。


企鹅FM和咸鱼将吉祥物运用到设计当中,拟人化的动作表情和可爱的模样,使人印象深刻。吉祥物是企业品牌的化身和象征,被赋予美好的意义,在信息传播中不仅吸引用户的目光,也拉近与用户的距离,更有助于企业品牌文化的宣传。


百度阅读则用一盏灯的形象,一句贴心的话,很是应景?#35805;?#24230;阅读的启动页还有其他的场景,每一次启动都让?#25628;?#21069;一亮,使?#22235;?#24515;平静。


Image title


2、引导页


引导页的内容?#35805;?#26159;整个项目的简介或重要功能的描述,页数在3-5张,用在引导页上文案要简单易懂,每页的文案都要取其精髓。引导页的设计样式是很自由的,那我们该如何加入情感化内容?

Image title


文字


好的文字是能戳?#22235;?#24515;带来情感的,百度阅读的文案,让我觉得读书是一件文艺舒心,能够改变生活的事,配合清新的插图,很有代入感,让人产生共鸣。


Image title


但并不是所有的项目都是这种高大尚走心的产品,?#28909;?#37329;融类、教育类、医疗类等,引导页的文字很多会从用户痛点出发,击中痒点,告诉用户你在这里能解决什么问题,平台能给你带来什么。

文案不是设计师提供,但是设计师也要对文案有所理解,也需要站在用户的角度体验文案能否让你产生共鸣。在时间充足的情况下,可以协助产品,与团队一起?#21592;?/span>


设计


如何设计?设计什么风格?这些问题就跟设计师的个人经验和能力有关了。设计的元素要与所提供的文案环境一致,这样更便于用户的理解,即使不用看文字,观看画面就知道所要表达的内容,要让你的设计会讲话。 

我们可以从一款金融APP去解析,从第一张引导图设计中,有秒?#21360;?#20648;蓄罐、钱币,它告诉我们在该平台投资能够更快的赚钱。第二张?#21152;?#19978;升的标尺、钱币、保?#23637;瘢?#23427;告诉我们在该平台投资是安全的,他们有严谨的安保功能。第三张图,就是畅想生活安逸的画面。图的含义跟文字的含义也很贴近,很清晰给用户表达了想要表达的意思。


Image title


3、空白页


提示是在页?#23159;?#26377;内容的情况下,所展示的提示内容。该页可以单纯的文字提示(易缺少情感),?#37096;?#20197;插图配文字。


空白页的插图风格需要保持视觉一致性,若有吉祥物,建议多使用吉祥物作为插画元素,不仅达到情感化目的,也宣传了品牌文化。若没有吉祥物,设计中则可以加一些人物元素,同样也能够达到目的。


Image title


小结


底部tab的几个主要页面设计出来后,整个APP的视觉风格就出来了,图标样式也是整个视觉的影响因素。从iphone6界面恢复?#27493;?#35774;计以来,很多APP的设计风格就开始改版成?#27493;?#39118;,拥有大?#32771;?#29992;户的?#21592;Γ?#26159;最快发现样式改变的。


当然,总会?#34892;?#20135;品是特立独行的,百度钱包就是最好的例子,直角横行,它属于金融类产品,使用直角的设计样式,给用户严谨、认真的感受,这种感受,也应该是金融行业所秉承的态?#32676;?#30446;标。

Image title


三、 体验

这一步是辅助思考,当然这也是成为优秀UI设计师的必经之路。

我们在看竞品或其他产品时,建议体验整个APP流程,体验每个界面的视觉影响,思考为什?#20174;行?#20803;素会引导你点击?为什么主要功能模块要按该种方式排版?作为用户,你觉得?#24515;?#20123;不合理的地方?为什么同类产品,在业务发展上会有所不同?...

多面的疑问?#22949;?#34892;解决的锻炼,在未来设计想法上会更专业,也能更好的描述自己的设计想法。


很多刚入门的UI设计师不知道该体验哪些产品,没有方向,推荐大家,可以在设计网站?#20174;?#31168;设计师的UI类分享,对应文章中被举例的APP,与优秀设计师共同思考。


总结


学习是?#26632;?#26376;累的?#34385;椋?#20174;0-1是很好的历程。在上述的分享中,我是以全站的设计思维思考的,全站设计师已成为主流,深处互联网行业的我们,不能只低头看到自己的一两亩小田,要多研究数据和用户的真实场景,当然也要研究跟自?#20309;?#26469;发展息息相关的行业变化。


从0-1的设计,我也是第一次经历,设计中也有过很多问题,因为经历了2.0的设计改版,所以结合两次经历,得出自己的设计思路。


第一次写那么长的文章,会有很多不足,希望?#19994;?#20998;享能够对大家有所帮助??


下一篇文章我将分享改版当中遇到的问题和解决办法,?#38431;?#20851;注哦

我叫小梦婷

WX: DY1410006357

201粉丝/102关注

砖家小有见解当?#20160;?#35753;lv.1一鸣惊人首页新秀
小梦婷的2018闪屏页插画设计(一)

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

我叫小梦婷

TA已经获得12枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

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

  • 经验

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

  • 活跃

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

  • 拓展

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

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

广西福彩官网