学校app（如何从零开始设计一款漂亮的学校APP）

一、项目背景

石室天府中学附小是千年名校石室天府中学下属小学，学校在近千年的发展中，经历了历任校长的辛勤而智慧的付出；从中华优秀传统文化的源头出发，在地域背景、学校背景、文化底蕴的深层次分析中，探寻到蜀地本土积淀传承的善文化，并植根到学校教育理念中，以“善文化”管理学校，以“善文化”为魂来塑造学校良好的精神风貌。结合一些自己的思考，将设计思路分享给大家，希望对设计师前期分析、寻找设计依据及设计定位有所帮助。

二、视觉设计目标

在互联网产品越来越同质化的今天，做出有差异性和符合品牌调性的设计是项目面临的挑战，所以在品牌基因方面，做了大量的尝试。

本次项目在校方的支持下，从设计意图、设计规范、布局、品牌、色彩、各功能组件等做了一系列的研究，在思维层面上将视觉调性定义为：丰富多彩、活力、情感、乐趣。设计的理念因子是：活力、简洁、高效、自然；从而解决人与人，人与内容之间的沟通与触达。

三、品牌理念渗透

我们要想把如上梳理的每一个字眼体现到位，植入用户心智，最好的办法是先选择能够被视觉化的词语，然后使用这一视觉将这个字眼植入心智；比如“丰富多彩”、“活力”等。如果说之前的分析是脑力碰撞，那么接下来便是对行为层面的体现。

1、识别品牌视觉：颜色是第一视觉

首先，品牌色是用户感知品牌最直观的方式，比如：想到可口可乐就想到红色，想到百事可乐就是蓝色。对，好的品牌色能够占领用户心智，从而产生联想，这就是品牌色的重要性。

我们选用红色作为品牌色彩的主色红色代表儿童的活力、乐趣、丰富多彩，同时，用红色还代表了对千年经典的创新精神，像一脉相承的血液在数字时代的延展，创造着无数的希望与可能。此外，红色在某种程度上还代表着一种承诺，信任。其次，辅助色彩的应用上，网站大面积使用中性色系来体现创新、发展和品质感，并使用红色作为点缀色产生对比。简洁的白，浅灰色系搭配能有效凸显严谨、一丝不苟，并产生极强的精致感。

我们选用红色作为品牌色彩的主色。

红色 -- 儿童的活力、乐趣、丰富多彩。

红色 -- 代表着一种承诺，信任。

红色 -- 对千年经典的创新精神，像一脉相承的血液在数字时代的延展，创造着无数的希望与可能。

其次，辅助色彩的应用上，网站大面积使用中性色系来体现创新、发展和品质感，并使用红色作为点缀色产生对比。简洁的白，浅灰色系搭配能有效凸显严谨、一丝不苟，并产生极强的精致感。

所以，以上结合品牌策略需求设计颜色，是成功塑造品牌，打造品牌色的关键。

2、识别品牌视觉：字体是体现品牌形象性格的重要部分

因为场景是在移动端，因此选用简洁醒目的无衬线字体，粗细一致，提高阅读浏览速度，优化阅读体验。字号的设计收拢为六种，默认思源黑体的Regular字重，标题以及操作文案采用Medium字重，拉开粗细差距，来做信息层级区分。字体形式符合简洁、高效的品牌调性，在界面中毫不违和，成为了界面的一部分。

3、识别品牌视觉：图标（符号）是品牌的印记

它的应用十分广泛，并且配合品牌色彩，形成品牌差异化，为做好品牌的传播和记忆增加筹码。附小的app视觉设计中，在原先单色线性图标的基础上，加入一些色块，简洁清爽的线性图标让图标富有含义和情感。同时，这种多彩度的设计也体现了年轻的场景，用色上更加鲜亮，突显年轻化，形成校园自己的图形体系。这些元素组合成的超级符号传达了活力、情感、乐趣的概念，为用户解决了校园办学教学丰富多彩的需求。

四、功能体验

1、用视觉来传达用户需求是互联网快时代的主流

所以在前期需求的梳理上十分注意视觉感受。比如统一规划的栅格系统，整体设计风格简洁大气，通过适当留白，从而提高信息传播、抵达的效率。严格按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小，这些比例能更好地帮助用户阅读图片的内容，给用户最直观的视觉感受。

2、导航列表界面

延续图形气质和调性，能够更好的统一视觉语言，传递更加一致的品牌感；简短有力的导航标题和留白作为每个模块的区隔，让用户的视线可以从一个模块自然地过渡到下一个模块。同时，我们尽量保证内容是简短有力的，这样就可以用更大的字号，减少用户阅读的成本。节省用户时间，传递品牌「更便捷」的理念。

3、单屏界面内收拢减少了图片规格，统一了图片的圆角处理。同时底部的视觉节奏控制上，赋予产品年轻活力的视觉感受，即满足功能需求，同时又不会喧宾夺主过度抢戏。

4、视频列表的界面设计

通过省略图标，进而缩小列表间距，平衡体验的同时，让用户在首屏看到更多内容；右侧的活动视频列表，优化了视觉重量对比。通过视觉重量的处理（对标题字号加粗、颜色增强），让用户更加便捷的获取有效信息，更好的诠释品牌形象。

5、“共创共享”、“智创校园”栏目列表是用户关注度最高的路径，针对这个场景，遵循视觉服从功能，极简克制的界面「高级感」设计理念，通过视觉手段区分信息层级，让用户浏览时「更便捷」「更高效」。

以上，是品牌理念渗透到 APP 设计中，从品牌理念渗透、品牌基因、功能体验设计、图片设计到排版布局，以上一起构建了完整的石室天府中学附小校园的视觉体系，统一的传递全新学校办学教学理念，全方位整体强调附小价值。

最后，感谢大家能耐心读完，希望对大家的界面设计有所帮助。

（如需转载，请标注出处）