Front-End

    13. 前端基础-设计风格

    Published
    January 15, 2024
    Reading Time
    1 min read
    Author
    Felix

    专栏: 

    开发基础-设计理论

    每个产品的设计都具有自己风格和特性,设计本身就是在表达。银行网站可能表达的是安全和专业的交流,而时尚的初创公司可能会给人感觉有趣和好玩的设计。

    image.png

    而风格由几个点决定,1、拍脑袋的人是个什么样风格的人(他喜欢什么风格)。2、产品是个什么风格的产品。3、公司的整体风格是什么样的。

    而设计总是能够综合这些来做决定,这对于设计很难,因为需要摒弃掉自己的想法,去磨合一些冲突的风格,甚至强行要去做一些不够好看的东西,所以有的时候我们作为开发真的要体谅一下设计。

    从表面上看,赋予一个设计一个特定的风格可能听起来很抽象,但它在很大程度上是由一些细节和具体的因素决定的。

    Font choice

    字体在决定一个设计的感觉方面起着重要的作用。

    如果你想要一个优雅或经典的外观,我们可能要在设计中加入一系列字体:

    优雅经典:

    image.png

    好玩有趣:

    image.png

    朴素,然后由其他元素来补充风格和特性:

    image.png

    Color

    有很多关于颜色心理学的科学理论,但其实在实践中,我们真的只需要注意不同的颜色对我们自己的的感觉。

    就像蓝色是安全的,也是很熟悉的,舒适的一种颜色:

    image.png

    金色带来的感觉是贵、高贵、昂贵:

    image.png


    粉色是更有趣一些:

    image.png

    简单教大家一个小技巧,有的时候我们在选择配色的时候,经常会想这个地方的颜色什么比较合适,用现实世界中比较喜欢的东西的颜色是个比较好的类比法。

    Border Radius

    圆角对于整体设计感也是一个因素。

    小圆角通常就比较中性,不主动表达意愿

    image.png

    一个大圆角则显得有趣一些:

    image.png

    没有圆角的感觉则是严肃或正式:

    image.png

    但是无论我们选择什么,保持设计的一致都是很重要的。不然就会带来一种冲突和混乱的感觉。

    文案

    这点其实非常好理解,假设你在做政府网站,你的文案应该是更专业和正式的,而对于一个好玩的C端,语言应该可以跳脱一些。但总体都是有一个原则,清晰的表达意图

    而对于文案的另一部分则是,有一些字放在设计里面就是会很难看,不管是英文网站的设计还是中文网站,这也是很多做国际化应用的痛点和通病。

    决策

    在开始我吐槽了一下国内传统公司的设计风格。

    在最后,想要教大家一个小技巧,这个技巧的前提是你有一定的话语权。当你自己很难下决策,或者觉得决策过于复杂、很难说服别人。那么就可以看看最终要面向的群体的人在使用的其他网站(...看点好的),以此为论点去说服领导和同事。

    当然这个意思不是说全抄,借鉴和抄的区别大家应该能理解,全抄就是属于是他家产品的二流版本了,