222021-4

2021 第十九届亚洲设计学年奖竞赛方案

2021 第十九届亚洲设计学年奖竞赛方案已出，蓝蓝设计前线为学弟学妹跟踪报道本次比赛的相关事宜，预祝学弟学妹在本次比赛取得优异的成绩，加油哦~

2021年会主题
设计面对”复杂系统”

联合主办
亚洲城市与建筑联盟
亚洲设计学年奖组委会
联合承办
浙江工业大学设计与建筑学院

支持与合作（排名不分先后）
AECOM
英中贸易协会
英国Arup 城市创新中心
第一太平戴维斯
中国建筑西北设计研究院
英国空间句法
B+H
CallisonRTKL
Aedas
SASAKI
Perkins+Will
广东省建筑设计研究院
华南理工大学建筑设计研究院
JADE + QA（英国再绿深坑建筑设计事务所）
PMA普玛建筑设计事务所／英国 Plasma Studio
德国ISA 意厦国际设计集团
德国雷瓦德景观建筑事务所
德国施耐德舒马赫建筑设计有限公司
都市意匠城镇规划设计（北京）中心
上海市政工程设计研究总院（集团）有限公司
思朴（北京）国际规划设计有限公司
WSP维思平建筑设计
安博戴水道
英国ATDESIGNOFFICE （安托士）设计顾问有限公司
筑博设计股份有限公司
ARCHILAND筑土国际
设计互联
方体空间工作室
王昀建筑工作室
广东省集美设计工程有限公司
澳大利亚
IAPA 设计顾问有限公司
C T G
城市组
AaaM
吴门雅集文化
广州同程建筑技术有限公司
山水乡国际设计咨询
广州阿拉丁物联网络
科技股份有限公司
中山大学视觉文化研究中心
出版合作
中国建筑工业出版社
合作与支持媒体
《新建筑》《建筑师》
《建筑技艺》
《时代建筑》
《家具与室内装饰》新浪家居
www.design1881.com
亚洲设计观察（微信公众号）
设计在线:https://www.dolcn.com/
特别合作
新明珠陶瓷集团

写在前面
中国环境设计学年奖蜕变和全面升级

升级背景 ▕ Background

2015年以来亚洲设计学年奖及其精神一直是锐意进取、自我更新和快速迭代发展并自我超越的，开放、自由、平等和互相尊重与包容也是其优秀传统。

中国环境设计学年奖历经改名、增设奖项、增加评委，拓宽参与的院校与机构、多次与国际学术和专业机构的交流，她所包含的内容与外延使之成为名副其实的学界和产业合作的国际联盟组织，十九年的探索和实践已经托举她进入一个更大的国际、国内、学术、行业和产业联盟的国际平台。

为了更名实相副的推动活动的发展，经与评委、参加院校和重要合作支持机构的沟通，2015年在第十三届活动中升级为亚洲设计学年奖，其主办机构为亚洲城市与建筑联盟（Asia Architecture and Urbanism Alliance ，简称 AAUA），亚洲城市与建筑联盟是响应国家战略发展，在新常态下作为亚洲国家和地区，城市规划与建筑领域行业内学术与产业、行业更加紧密对接的国际联盟组织。

联盟提倡构建一个更开放、有远见、更有责任的平等、相互尊重的行业合作组织，关注、支持并推动全球视野下的亚洲城市与建筑行业新思想、新技术、新工艺、新材料、新产品和新服务、新应用、新业态的产生及发展。

而亚洲设计学年奖是其学术和专业作为平台进行产学研结合、交流的重要组成部分，设计不是独立存在的，甚至不是相对独立存在的，是和伦理价值下的政策、法律的制定、完善，和文化、历史变迁产生的影响紧密相关；是和投资、工程、运营维护和管理及其风险控制紧密相连，更关系到我们赖以生存的自然及其人文生态系统的可持续发展。

而科学和技术进步推动的生产力的发展也在快速地改变着我们的生存状态和生活方式，这一切也都在改变着设计自身，设计及其教育的讨论自然不仅仅在高校之间，而是在产业的车间里在工程中、在实验室里；在行业的各种顾问服务对接和交流、协同设计及其产业发展合作里。

以世界的视野观察亚洲，以亚洲的交流平台推动中国的发展。
产业发展如此，设计及其教育亦如此。

DESIGN TOWARDS THE COMPLEX SYSTEM
设计面对“复杂系统

“科学已经探索了微观和宏观世界；我们对所处的方位已经有了很好的认识。
亟待探索的前沿领域就是复杂性。
——《理性之梦 (The Dreams of 》，海因茨 · 帕格尔斯 (Heinz Pagels)

由于世界永恒的绝对运动和人类自身认知的相对局限性人与世界的关系是错综复杂、动态变化的如何处理这两者的关系是一个值得不断思考探索的课题。而这其中人类的认知愿望和解决问题的需求一方面创生了更为复杂的系统体现出心智主体自身的复杂性；另一方面也成为不断解决复杂系统疑难的动力。

1 命题背景 |Proposition Background
大脑、免疫系统、细胞、昆虫社会、经济、虚拟世界……我们无一例外深深嵌入复杂系统之中。全球化将人类世界紧密连结人类所处的环境、面临的问题愈加复杂。COVID 19 引发的公共卫生危机正是考验和检验社会防疫系统和社会治理系统应对的鲜活案例。
在同一系统中可能包含社会、经济、文化、技术、政治和心理的诸因素的相互作用。如果把上述因素彼此隔离则它们之间的相互作用将永远不能被洞察我们的身体、社会、国家、世界将面临前所未有的巨大挑战。
因此设计需要站在更高的维度统筹思考综合应对。

2 概念阐述 |Concept Elaboration
“复杂系统是由大量相互作用的组分组成的系统与整个系统比起来组分相对简单没有中央控制组分之间也没有全局性的通信并且组分的相互作用导致了复杂行为那些适应性的、类似生命的、智能性的和涌现性的行为。”
——《复杂 (Complexity) 》梅拉妮 · 米歇尔 (Melanie Mitchell)

复杂系统代表着系统科学的前沿方向，其大规模的简单运作规则聚合产生了 1+1> 2 的集体行为和复杂信息处理机制。复杂系统的多样化聚集、非线性流动使得许多问题变得复杂化。运用系统的思维去思考新的模式、组合、功能、架构使设计发挥防患于未然的功能，这对设计者提出了新的要求。如本质安全性设计、社会设计、长效设计概念的提出和各种实践探索。

3 问题的确定性与不确定性 |Problem Certainty and Uncertainty
人类的能动性将本不属于人类的自然世界构造为一个复杂性系统，现代设计正是改造世界的手段之一。自现代设计之创生以来，籍以设计来创造与改变的客观世界已经在很大程度上化为了人造世界，甚至在不太远的将来，人本身就要成为这个人造世界的造物成果了。可以想见，在一个如此特殊的系统中，有太多情境需要我们审慎理性地面对。
设计面对复杂系统，复杂是挑战，本质是面对复杂对象的系统和人。对世界和生命体的存在保持敬畏，人类自身的谦卑、尊重、珍惜和感恩本身就是智慧，我们需要以系统的思维，从不同维度和视野进行多层级梳理、多文化思考，剖析并解构复杂系统内的层级关系，把握系统存在与演变的普遍规律与原理发现系统中尚未被解决、或尚未寻得更优解的问题，并以创造性的、系统的、综合的、有竞争力的、可持续的、面向未来的方式加以解决。
突发的公共事件对世界的影响在未来，或许也会是设计思考与探索的常态社会的发展始终都在各种不确定性之中，设计面对复杂系统的研究也是对各种不确定性的确定性研究或对确定性的不确定性探索与实践吧——

活动宗旨 ▕ Event Purpose

1. 通过此项活动推动各高校间的教学与学科建设，促进教学实践与学术交流；
2. 本活动是设计与交流在产业发展和行业交流的重要平台；
3. 依据各院校教育和各地区经济、历史与文化的背景，探讨和挖掘不同的教学优势与特色也是对我国高校不同学科背景下设计专业的教学改革与实践成果评估的探索；
4. 通过此项活动激发学生对本专业学习热情，促进大学生坚实地迈入社会与市场，
催生设计专业创新人才，同时探索人才培养机制的实验性、开放性和更多可行性；
5. 通过本项活动将对推动我国设计教育发展、提升我国设计领域整体水平产生积极影响；
6. 构建产业和行业发展领先的相关企业与高校设计教育合作的教学互动平台；
7. 致力于建立开放性的互动平台，以学术和专业为核心，推动教育和产业、行业对接；
8. 推动中国设计与教育在更广泛的国际视野下的交流和合作。

参加院校▕ Participating Schools

开设以下及其相关专业的高等学校
城乡规划设计
城市设计
建筑学
景观设计
风景园林设计
环境设计
室内设计
艺术设计
光环境设计
公共艺术
工业设计

奖项设置▕ Prizes Setup

由于发展的需要，2021 年亚洲设计学年奖参赛方案将继续尝试新的实践和探索学科体系的存在自然有它历史的原因，然而所有的学科建设和发展的根本目的是发现真正的问题、本质和真相，并给出创造性、竞争性和可持续发展的系统思考和解决之道变革基于以下思考
1、国际化的学术和专业对接
2、产业化的学术和专业对接
3、开放性的学术和专业对接
4、综合性的学术和专业对接

很显然，空间的类型只是我们界定问题的一个角度和研究方向。
随着全球化的进一步加强，地域化的问题都呈现出全球化的特点，我们很难孤立而封闭地思考面对问题本身的国际性，更由于学术和专业本身的语言世界的不同，我们更不适合使用产生不同理解的语汇或概念界定。学术和专业研究本身就是为产业发展和社会进步服务，随着社会的发展，产业本身也在学术和专业上做积极的思考和探索，与产业发展积极对接是学术和专业发展的重要路径。毋庸置疑，我们已经处在一个全球化的开放性社会之中，我们的思考和探索之路自然也要开放性的，世界本身就是综合的，设计的定义和边界本身也是模糊的和充满不确定性，面对本身就是复杂的和综合的问题，其解决之道自然也是需要综合而系统思考的——
我们将会在以下方面受到存在问题的挑战
1、快速变化的生产力的发展推动的产业和社会变革
2、始终不变的人性及以新的不同的面目呈现的欲望
3、个体、机构与及其合作项目与所处的系统的生产关系运营机制和系统特点研究
4、突发的社会公共事件带来的大规模社会问题成为新的设计要素研究与实践

我们围绕着需要解决问题的目标，整合相关领域的知识来系统而有机地研究它的最佳组合解决之道，新的构思，都不应该被原有的知识体系所束缚，要做的就是提出更高的目标，去整合和重组；去实验和实践；去探索更有价值的解决之道。

面对设计对象及其所处系统的复杂性和矛盾性，2021 亚洲设计学年奖竞赛方案的变革也是我们共同积极思考和探索的一部分

第一类：专业奖项

为提高学科交流水平，我们面向本科以上的设计教学交流设置相关奖项。高职学校也可以根据自己的学科发展水平参与到相关奖项类别

1、保护与修复
该奖项针对历史文化建筑与环境奖项关注人文、历史、社会发展和文化进步等方面，更注重对于地域性的历史和文化价值的挖掘、梳理和保护，倡导正确的历史观和文化观，不仅仅以当下发展的政治经济逻辑对待历史与文化。尊重本质与真相，以保护与修复为主的项目研究与实践。

2、更新/改造与转型
建造及其设计的功能类型随着时代发展，其使用方式和服务对象改变，需要新的设施更新和设计激活，本奖项关注于如何在现有基础上针对新的功能需求提出创造性的设计解决方案，包括改造、加建、整合和不同的使用方式研究等。
在植入新的元素中，从细部、空间、尺度、材料等方面综合提升其综合价值。

3、临时与可移动建筑与空间
和永久性建造思考相对的是大量的空间设计其实具有临时性或可移动性的设计特点，包括装配式建筑、集成建筑、短期和临时景观、临时装置等，本奖项关注于设计项目本身的灵活性和可装配或移动性特点做定位研究。
该奖项鼓励对土地和环境的开发和使用方式做更有价值的综合性的创造性研究。

4、商业建筑与空间
以商业服务和展示为主要目的设计，本奖项关注在投资与收益作为目的的运营维护、管理的基础上，商业行为的高质量的氛围营造和商业空间的综合社会价值设计探索。并且考虑项目所在地域的地理条件、社会人文、消费特点和发展趋势，适应当代多元化的要求。疫情常态化给商业空间的发展带来了新的挑战

5、文化建筑与空间
以文化和教育性为主要属性的设计，本奖项关注文化空间与人行为空间的对话，强调空间的开放性、包容性和公众参与。强调在文明的普世价值下探索文化本身及其空间关系研究。
功能属性伴随社会发展发生变化，探索更多可能性，重视交互与体验。
文化空间要上升到文明的纬度思考和探索文化建筑与空间的理念和实践应该是推动变革与进步的示范和案例

6、居住建筑与空间
居住建筑的发展一方面基于科技的不断发展，另一方面需要满足不同人群和对象的精神需求。因此对居住建筑与空间设计提出新的要求。从空间的灵活性，功能多的多样性，以及光环境的气氛综合考虑，研究整体建筑的布局的环境协调性和宜居性。同时，空间服务于人，设计中不但在空间关系中体现行为心理学的研究与思考，更注重深层次的精神追求，空间不但考虑到提升生活状态，更是研究生命体的精神境界与空间的关系。
疫情带来的居住的健康新理念和生活方式的改变是新的设计要素研究住宅与新的社区规划设计也是探索的主题

7、生态、健康与可持续
基于生态、健康与可持续发展的设计，本奖项关注绿色材料的利用与科学处理，关注可持续发展的城市、建筑、景观及室内设计，关注基于节能、节地与环保的建筑设计，强调对环境及生态的尊重。提倡结构性、系统性的思考和更为综合性的设计研究。保护环境系统的生物多样性，提倡自然本身的生态修复及其可持续发展设计研究人与自然的关系在新的技术和生产力发展水平中应该呈现出更加有价值的思考和探索同时，在中国和其他亚洲城市，我们正面临着严重的环境问题以及由这些问题引起的严重大众健康危机。我们寻求能改善和提升大众健康的空间和环境设计途径。这些途径可以鼓励人们的身体活动，舒缓精神压力，降低精神疲劳，提供重要的生态服务或产品，以及增强社会资本。在过去的数十年里，我们已经为粗放的城市发展付出了沉重的健康代价。环境问题和健康问题紧密相关，关系到每个人、每个家庭、和整个国家的命运。

8、展示设计
不断涌现的信息技术及其发展影响和挑战着固有的展示、展览的理念和观看方式，新的交互和体验不但体现在技术和设备本身，空间本身也随之在改变,展示设计不能理解为是一个空间设计的概念，它应该有更丰富的理解和内涵。
展示设计所包含和涉及到规划、建筑、景观、室内、技术、产品和相关设施的不同纬度的关系研究，体验、交互和服务设计研究是展览设计发展探索的重要构成。

9、设计研究（论文）
该奖项的评审由《新建筑》杂志社和亚洲设计学年奖组委会合作，优秀的论文将优先在《新建筑》杂志选登设计研究成果包括设计理论研究成果和设计实践研究成果，均以论文形式提交。要求具有深度的设计过程的研究，以论文及研究报告的方式提交，关注于在设计进程中产生新的设计认知、方法和设计价值思考。设计研究应该是基于但是要超越具体研究对象的，应该更有跨越时空和角度、角色抽离的特征。设计研究应该更本质地、系统性和综合性的做批判性研究。设计范畴并不局限于某一个特定的专业，可涉及科学研究和实践领域中，强调设计思维与设计行为的相互作用，为设计实践本身提供多维度的价值思考和设计决策。设计研究的成果提交要求提供其项目背景、论证过程和相关理论依据、数据、影像等，字数在1000 字左右，入围后评委会将根据评审需要要求进一步提供更多研究报告资料。

10、城市综合体与城市
面向综合密集型城市发展需求的设计，本奖项关注城市综合体对城市空间结构的整合，对城市公共文化服务供给的补充，以及对城市基层社会治理模式创新的激发。强调思考城市综合体能够为城市的高密度发展创造哪些价值，解决哪些矛盾和问题，进而推动城市可持续发展。
在高密度人居环境下，通过创造人群聚集所带来的积极互动，促成对有限空间更为灵活、多样且高效的使用，进而优化城市公共空间，促进城市立体化发展，提升城市整体活力。城市综合体作为全球范围高密度人居环境下，最为重要的城市开发模式和公共建筑类型之一，其核心价值体现即是“ 1+1>2”的“协同效应”。当前，在我国推进城市化的进程中，产生的重物轻人、重商轻文、功能割裂、缺乏活力等问题已经开始在城市综合体开发建设中集中突显。即对经济价值过于关注，忽略城市综合体应有的“城市属性”，使得其规划建设较为盲目和草率，建成后使用率低下，很难发挥其应有的“协同效应”。城市综合体并不应该仅仅成为利益获取的工具，或单纯追求综合运行效率的建筑，而应该是功能高度混合的城市空间，是建筑和开放公共空间的综合，是城市基础设施的有机延续，并承载和提供丰富的高品质的城市公共生活。

11、公共艺术与环境
公共艺术作品征集要点：公共艺术是指公共开放空间中的环境营造和艺术创作，作品的公共性体现在对特定公共空间中的集体精神和群体共识的提炼和塑造。作品需从艺术的视角和态度思考并对待公共环境，同时必须具有开放、公开的特质，突出作品与环境和区域人文的融合，在作品的空间、材料、造型上具有探索或突破性，应充分注重物质成果和精神成果对环境的再创造。

12、建成环境技术与创新
随着信息技术、材料技术甚至生命科学技术的快速演进，建成环境的功能目标、呈现方式以及营建的过程都正在经历着前所未有的变化。一方面，新兴的技术手段如大数据、人工智能、无人驾驶、智慧城市、3D 打印、生物材料等新技术的发展为建成环境设计提供了诸多新方法和新理念，使得建筑设计、城市规划和景观环境设计理念、内容和方法、路径等越发多元化；另一方面，也对于院校的设计人才培养模式提出了新的要求。技术创新已经成为新形势下重要的设计推动力。同时也必然推动着设计教育从内容到方式的变革。我们也并非仅仅关注新兴的高科技趋势，我们同样也关注在不同地域条件下的适用性技术解决，对于环境友好模式下的甚至具有传统智慧的乡土技术体系，仍然是设计传承与创新的关注热点之一。本单元的竞赛希望作品探讨通过创新的技术手段，创造性的提升环境中人的行为质量和生活品质，在经济、社会、文化和生态等多维度实现可持续发展与进步的空间目标。征集的作品内容包括城市设计、建筑设计、景观环境设计等，其中需包括对相关技术的必要介绍，以及对该技术如何应用于解决设计中面临的具体问题，如何影响设计方案的生成进行详细的说明。

13、城市设计
关于城市设计 urban design 的概念、理论与实践很多设计师和理论家对这一名词的定义都有自己独特的看法。城市设计这一范畴在二十世纪中叶已经开始变化，除了城市规划、景观建筑、建筑学等范畴的关系日趋绵密复杂，也逐渐与城市工程学、城市经济学、社会组织理论、城市社会学、环境心理学、人类学、政治经济学、城市史、市政学、公共管理、可持续发展等知识与实务范畴产生密切关系，因而是为一门复杂的综合性跨领域学科。
我们设立这个奖项是倡导我们面对城市与乡村发展中的一系列复杂的空间和环境问题，打破传统的学科界限和思维，而是开放性地实验、探索和发展这一理论。
COVID-19 全球疫情肆虐是一个城市设计重要的新的课题研究

14、光与空间
颁奖单位：
亚洲设计学年奖组委会
亚洲国际照明学习中心
AAUA 国际照明联合实验室
参赛对象：
参加学年奖的作品适合“光与空间”奖项要求的作品，请在投递选项上注明，奖项不占用每个学校的 16 个既定参赛名额。也可以是单独投递。
奖项安排：
金奖 1 名；银奖 3 名；铜奖 5 名；优秀奖 20 名。
评委会根据每年投稿的数量、质量进行一定比例的调整。
说明：
亚洲设计学年奖“光与空间”设计竞赛的设立，是为了对城市设计、建筑、景观、室内设计专业学生在其设计作品中所表现出来的对光在空间中的的表现和想象力等优秀品质，以及通过其设计作品中自然光和人工光的运用对环境和人之间的关系所做出的理解和关怀，并为亚洲未来的年轻设计师们提供一个发展和交流的平台。

1. “光与空间”界定清晰的设计目标
1.1 美学与功能的目标、视觉任务的多样性与复杂性、能耗限制与建构要求
2. 阐释清晰的设计概念
2.1 照明设计支持并增强建筑设计与景观设计
2.2 照明设备很好的整合到建成环境之中
2.3 设计创意具有创新性与唯一性
3. 表达清晰的解决方案
3.1 阐释明晰的光的数量标准
3.2 适当的光的质量标准，诸如视觉舒适、防眩光、对比度等等
3.3 节能与环保理念的执行，天然光的整合、夜天空保护等
3.4 成功解决照明设备的易达、可维护、合理隐藏

组委会根据每年投稿的数量、质量和评审结果进行一定比例的奖项调整
注：作品参评类别不再分类设计奖/创意奖，奖项评审更注重设计的综合性和系统性，及其解决具体工程项目和社会问题的能力

序	奖项	金奖	银奖	铜奖	优秀奖
1	保护与修复	1	3	5	20
2	更新/改造与转型	1	3	5	20
3	临时与可移动建筑与空间	1	3	5	20
4	商业建筑与空间	1	3	5	20
5	文化建筑与空间	1	3	5	20
6	居住建筑与空间	1	3	5	20
7	生态、健康与可持续	1	3	5	20
8	展示设计	1	3	5	20
9	设计研究（论文）	1	2	3	10
10	城市综合体与城市	1	3	5	20
11	公共艺术与环境	1	3	5	20
12	建成环境技术与创新	1	3	5	20
13	城市设计	1	3	5	20
14	光与空间	1	2	3	20

第二类：
优秀指导教师奖、优秀组织奖
设立 2 个奖项：
1 、优秀指导教师奖
2 、优秀组织奖（机构）

优秀指导教师奖：
毕业设计作品得到铜奖以上的学生指导教师
优秀组织奖：
组织学生集体参赛的院校及其它合作机构，必须是组织集体参加竞赛的。
各校组织竞赛活动的情况（海报张贴、竞赛辅导等照片和视频文件等）请整理好，随作品一起寄送到组委会，将作为参与评选优秀组织奖资格的重要组成部分。

以个人名义参赛的获奖作品不作为高校优秀组织奖的资格评定。

奖励 ▕ Rewards
2021 年度奖项的个人奖励除了奖杯和证书，还将
1、纳入亚洲城市与建筑联盟设计人才库；
2、部分奖项获得国际学术权威评委签名；
3、国际和行业优秀设计机构提供实习和就业（可根据具体情况选择国际和国内）
4、国际和行业优秀设计机构的 workshop 项目；
5、国际设计合作高校的国际交换生项目；
6、合作伙伴的游学资助；具体奖励方式由合作机构确定后进一步公布

评委及评委会构成▕ The judges constitute
组委会每年将根据奖项发展需要和评委会成员提名邀请国际学术权威参与评审（按照不同专业类别分别邀请），轮值评委负责评审工作本身，保证评审工作的透明、公开、专业性和评审程序的公平、公正地执行。

评委构成更加合理：增加国际学者担任国际评委，并积极邀请全球知名设计机构设计总监和主管、投资方和知名开发方、运营和管理方加入评审委员会，全方位、多维度对设计本身做价值判断和专业评审界定

评委构成国际化，和产业、专业对接：按照一定比例邀请以下专业人员参与评审工作
行业主管和政策制定者
投资及策划专家
文化和历史研究专家
项目运营和管理专家
设计伦理研究专家
工程技术专家等

革新后的评审工作将更全面和细致，也使奖项本身更有活力和吸引力，亚洲设计学年奖将体现其作为价值技艺的价值设计观和一贯的社会责任。

公平公正起见：年度评审专家的名单不予事先公布
年度颁奖典礼上评委会代表会对年度参赛作品做评审总结

参评要求▕ Requirements for Participating in Judgment
无论设计实际图纸数量的多少和版面尺寸的大小，所有交送参评的作品必须符合下列要求。不符合要求者视为无效作品，不进入终评程序。

1. 提供参赛资料包括 3 部分：
A 专家评审部分：
A1：提供 JPG 文件，包括设计说明，草图方案，主要平、立、剖面图和彩色效果图；
A2： JPG 文件最少不能少于 10 页，最多不得超过 20 页，为方便专家评审，请把每张图片控制在1600×1600（像素）（精度 72dpi）以下；每张图片文件量大小, 不能超过 3M；
A3：设计说明应结合调研分析和设计流程进行，不单独列出，无设计说明、只有效果图的参评方案视为放弃参评。
A4：动画和 PPT 不作为评审文件。
A5：这一部分不得出现参加院校、指导老师和学生的相关信息
B 出版使用部分：提供 JPG 文件，并按 A4 竖向幅面排版制作，精度至少为 350dpi，以便满足出版需要，数量不超过 5 页；
C 展板使用部分：提供 JPG 文件，并按 A0 竖向幅面排版制作，精度至少为 72dpi，以便满足展览需要，数量不超过 5 版。
注明:
1、通过组委会电子邮件xuenianjiang@design1881.com传送
2、为保证一定的参赛作品质量，各参加院校的参赛作品须由校方推荐，并提供推荐意见,没有校方组织的各院校学生，须按参赛要求把资料发送至亚洲设计学年奖组委会。
3、为提高评审效率，各高校可以以学院、系或专业科为单位参加。各以系或专业科为参赛单位的高校的推荐作品方案最多不能超过 16 个（本科城市设计、建筑、景观和室内设计类别），超过部分视为以个人名义参赛；每个作品方案的学生成员不超过6人；
4、各参加院校请详细填写参赛资料表格（标明参加学生的姓名、联系电话，作品名称，指导老师姓名、联系电话、电子邮件等）；参赛回执表即参赛申请表，扫描本文底部的二维码即可下载；
5、参赛文件网络传送前需进行杀毒，以免造成文件损坏。

评审要求▕ Requirements of Judgment
1、设计成果应体现对社会、文化、历史及生态可持续的关注，符合人类文明的普世价值观；
2、设计成果有明确的设计目标和针对性的需解决的问题界定；
3、设计成果清晰地表达设计分析思路和设计思考过程；
4、设计的调研和分析，也即其设计思维和设计逻辑应该是设计的一部分要特别体现出来，倡导创新性和独特性的符合设计目标逻辑的设计成果；
5、设计成果包含符合国家相关专业规范要求的完整的设计图纸内容；
6、设计成果通过效果图、实体模型照片等方式客观真实地表达设计效果与设计意图
7、设计成果关注结构、材料构造、及设备技术条件等工程技术可行性问题；
8、设计充分尊重地域环境与材料的关系及其对基础材料的创造性使用；
9、设计成果版面要求图文并茂、内容完整、表达清晰。

参赛程序▕ Competition Procedures
1. 参加的高校请向组委会邮件索取参赛申请表，或登陆学年奖网站：www.design1881.com 下载参赛申请表。参加活动的各院校所交参评作品不得超过16 件。交件截止时间不得超过7月20日，以寄出作品时间为准。

组委会办公室：姚领 / 刘颖/ 黄璐 / 陈奕彤
联系电话：020-87589132、87589232、38486899
电子邮件:xuenianjiang@design1881.com
网址：www.design1881.com
学年奖QQ：1693304548、1277960467、2158073558
微信号：xuenianjiang-1、xuenianjiang-2、xuenianjiang-3
微信公众号：亚洲设计学年奖、亚洲设计观察
收件人：亚洲设计学年奖组委会
邮寄地址：广州市天河区林和街39号中怡城市花园A座3002 邮编：510610

2. 由组委会负责作技术性筛选，筛除不符合提交规则的作品，不符合专业设计制图规范（平面图、立面图、剖面图、节点详图、效果表现图）的作品，并分送专家评审。评审程序：严格执行程序的公平和公正性利益回避原则技术评审——初评（价值导向和按照比例筛选）——通讯评审——终评汇审——公布
3. 参加活动的各院校及个人不交纳参赛费用
4. 投稿请注明：
A. 学年奖组委会收
B. 单位投稿：投稿单位详细信息：单位名称、联系人姓名、手机、办公电话等
C. 个人投稿：学校、院系、班级名称、个人详细信息（姓名、电话），注明个人投稿。

参赛说明▕ Specifics：
1. 所有参赛者文件必须齐全，否则无参评资格，
作品均请按照要求署名和提供作者详细联系方式；
2. 活动组委会有权刊登及出版、展览本次活动作品，以作宣传之用，不再另付稿酬；
3. 本次活动的最终解释权归属活动组委会所有；
4. 凡参加本活动的设计作品不得侵犯他人著作权、名誉权、肖像权、姓名权等人身权利内容涉及到相关法律问题，一切后果由作者自负。
5. 各参赛院校请勿在光盘背面贴上各类标签。如需标识请用油性笔进行标注。
6. 每个参赛方案建立一个文件夹。在其下分别建立“专家评审”“出版”“展板”三个文件夹，在里面分别放入对应的电子文档。当一张光盘无法容纳下3个文件夹下对应的文档时可以增加光盘。但需在光盘下建立类似的文件夹以便识别文档所属类别。
7. 在参赛表格中请完整填写作者、导师、院系等相关信息，
以确保在评审过程中出现电子文档不能读取等特殊情况下能及时联系到本人。
8. 一个作品只能参与一个奖项的评选，并在参赛表格中详细说明（光与空间和展示除外）。
9. 作品参评类别不再分类：如设计奖/创意奖。
10. 作品提交前请作者和老师详细检查专家评审部分的电子文档已经清除作者、导师、院系等相关信息。在评审中如发现有相关信息的作品视为自动弃权。
参评电子文档严格按照参评要求提供，不符合规格者也视为自动弃权。
11. 组委会在安排评审时有权根据评委意见把作品类别调整到更合适的奖项类别进行评审。
12. 作品提交可使用多种方式：邮寄光碟或者直接发送到组委会提供的邮箱以及QQ在线提交

亞洲城市與建築聯盟
亞洲設計學年獎組織委員會
二零二一年四月

文章来源：设计中国网站

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2785)

222021-4

以一个实例说明如何定制整套UI图标

高劲

一套 UI 界面当中，核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候，要用到大家最熟悉的元素才能贴合用户认知，要醒目、统一，也要足够「隐形」，避免喧宾夺主。今天这篇文章，来自著名的 Tubik Studio 团队，他们为华为旗下的 EMUI 10 系统设计了核心的图标系统，来看看他们的设计过程吧。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

我们总不会低估一个操作系统基础图标，对于产品的可用性和合意性的影响。基础图标虽然小巧，但是对于整个操作系统而言，总是极具影响力的，因为他们是用户界面的核心元素，帮助用户快速直观地在系统中定位、浏览、导航。但是，对于设计师而言，图标的设计始终是挑战，它看起来最为简单，但实则为最为艰难的工作。

图标需要高效，让人一目了然，但是也要具备良好的可识别性，在传统和创新之间达到平衡。这一次，Tubik Studio 设计团队将要给华为的 EMUI 10 来设计图标，而这篇文章将会为你揭示背后的设计过程。

这次的项目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 来负责。这次的设计项目从最初的探索构思入手，逐渐开始绘制草图，探索样式，一直到最后打磨，完成设计。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

项目内容

为华为 EMUI 10 系统的用户界面设计基础的图标

客户介绍

我们在 2019 年夏季，收到了来自华为的邀约，这次的项目要重新设计 EMUI 这套基于 Android 系统的用户界面基础图标，这套图标会用来适配华为旗下的旗舰手机，这些图标将会随着新版的系统部署到这些手机产品当中。我们的任务，是创建总计 54 款符合当下潮流趋势的图标，这些图标要能够贴合品牌和已有用户的偏好，并且能够吸引新的用户。

这个图标设计项目如今已经在当下的华为旗下手机产品中应用且部署好了，最早使用这套图标的智能手机型号为 Mate 30 ，紧接其后的是 P40。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

设计过程

在整个操作系统中，这些图标是始终位于用户视野以内、最基础的最核心的交互元素，通常用户每天都会同这些核心的基础 APP 进行交互，有时候一天多达几十次，因此它们应当具备良好的功能性，还应该足够美观，给用户带来满足感。同时，这套图标的设计，也应当足够统一，以协调的体验切入到整个 EMUI 的设计系统当中，贴合整体的样式特征。

所以，我们使用了一整套图标网格系统，应对不同需求，在设计的过程中，这套网格有助于确保所有图标外部尺寸的一致性，也保证了内部元素的统一性。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

为了发掘全新的视角，我们决定从传统的手绘图标开始，寻找重新塑造图标设计的方法。这些图标所涉及到的元素，早已为全球数百万用户所熟知，要重新设计图标外观，并且还要成套且统一，这本身就是一个巨大的挑战。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

比如「电话」图标所对应的听筒元素、「信息」图标所对应的气泡对话框这样的元素，是不可能完全抛弃重新创造的，所以我们的真正的切入点是在形态和色彩上寻求解决方案。

越是简单的东西，重塑起来就越难。

在实际的设计过程中，我们尝试了数以百计的造型变体，从完全放飞、非常规的的外部造型，到极其常规，大家熟知的造型解决方案，我们都逐一试过。而在色彩上的尝试相对会显得更加具有实验性：我们尝试使用明亮的紫罗兰色、栗色和浅绿色来进行混搭。

当然，我们很清楚，这样的实验性的工作是探索过程中的一小步，但是它是必须的，是创造新设计的种子，是寻求正确答案的必经之路。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

在设计过程在，有一件有趣的事情发生在设计「相机」图标的过程中。我们尝试过很多不同的图标造型，不同的元素，不同的样式，但是其中始终有一个细节是不变的，那就是右上角的小红点。这是为了暗示用户，华为的摄像头模组来自徕卡，这个红色的小点就是向其致敬的标识。

而下面的概念设计，则是强化了图标之间的几何轮廓的差异，从而提升图标在智能手机屏幕上的对比度和识别度。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

下一步，我们基于几何图形外观差异性，设计了多种造型不同但同样优雅的图标。在基于这种风格概念进行延伸的过程中，我们会优先考虑圆形的元素。而「天气」图标明显既不适合圆形也不适合方形来呈现，所以我们使用的是云和太阳两种元素的组合。「钱包」图标使用的是矩形，然后搭配卡片的组合。尽管造型整体上是相对自由的，但是所有的图标都是遵循图标网格，并且在视觉权重上尽可能统一。

在色彩和样式上，我们则更加倾向于渐变。没有色彩渐变，纯扁平的图标显得过于幼稚和「古早」，没有足够的品质感，所以，我们在新的图标设计上，开始加入渐变色彩，提升质感。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

不过，在最终版本当中，我们还是保留了图标外部的圆角矩形的外轮廓，然后将图标元素的内径进行了适当地缩减，渐变和核心的简约几何特征依然是整套设计的最高优先级。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

这套设计方案展现了在整套 UI 界面中，图标这个小元素的设计上所需要投入的精力和潜在的难度。想要图标足够协调、美观、易用还要贴合品牌特征、还要区别于以往，是一件相当不容易的事情。

Tubik Studio 是怎么为华为定制整套 UI 图标的？

细节里藏着魔鬼，任何细小的元素、线条轮廓、色彩的变化都可能会在屏幕上放大、被感知到。

文章来源：优设网作者：Tubik Studio

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2863)

222021-4

体系化表单设计-5步打造令人愉悦表单体验

涛涛

表单作为平台与用户联系最为紧密的一环，良好的表单设计可以带给用户流畅自然的用户体验，保证用户情绪的正向增长，而混乱无序的表单则会引起用户的负面情绪，影响甚至阻碍用户操作的完成，降低用户对品牌好感度和信赖度。对于我们这样的金融产品而言，产品内存在着如开户表单、出金申请表单、调整杠杆申请表单等形形色色的表单，如何将这些表单整理归纳形成一套完整的表单设计体系，带给用户统一、高效且优质的填写体验，是我们这次表单优化的主要的任务。

系列文章中关于表单设计部分我将分为上下两期来向大家分享，体系化表单设计（上期）主要介绍在项目中总结出的表单设计中的方法论，下期则是介绍方法论在我们项目中实际的应用，希望这次的分享能为你今后的表单设计提供思路与参考。

1 认识表单

1.1 表单的历史

表单在我们工作、生活中的使用由来已久，在还没有互联网的年代，表单就已经是人们收集和存储数据、信息的重要手段，并一直沿用至今。如体检时填写的体检表、入职时填写的入职登记表、银行开户时填写的开户表都是使用的这种印刷的纸质表单。它们身上有很多设计可以作为重要的参考，帮助我们优化 UI 中的表单元素。

表单是 UI 界面中最为常见的元素，它通常是用来搜集和呈现一些数据、信息和特定的字段。表单的应用极为广泛，比如登录应用时填写账号密码、网上购物时完善订单信息、OA系统中提交休假审批、修改个人中心信息时……都是在和表单发生互动。

1.1 表单的构成

表单的目的、内容、大小等虽然各有不同，但是表单的基本构成元素是相对固定的，在设计过程中，设计师需要合理组织这些元素，帮助用户在填写表单时，轻松愉快的完成，表单主要组成部分如下图。

1.标签：告诉用户此处相应的输入元素是什么;

2.输入区：可交互的输入区域，根据字段类型使用相应的交互组件;

3.占位符：对当前项进行额外的信息描述;

4.前置图标（可选）：描述文本所需的输入类型和特征;

5.后置图标（可选）：对输入内容进行控制，如：下拉的展开与收起、清空；

6.帮助（可选）：提供表单内容的注释或辅助类容，如：说明、注意事项；

7.反馈（可选）：告知用户当前操作可能或已出现的问题，如：提交成功、错误提示、网络问题；

8.键盘（可选）：在文本编辑时需要使用键盘，如：设备系统键盘、应用内置键盘；

9.操作按钮：操作按钮是在表单的结尾，如：提交、下一步、清空所有信息。

2 如何打造令人愉悦表单体验

在如今这个互联网时代，我们几乎每天都会接触到形形色色的表单，作为用户与产品链接的枢纽，表单设计的好坏会直接的影响产品的实际数据表现。好的表单结构清晰，交互合理，用户能够高效愉悦的完成表单填写，为用户节省了时间，同时也提高了自身产品的转化。而差的表单往往信息逻辑混乱，填写效率低，且容易让人产生挫败感而中途放弃，在无形中浪费掉了很多潜在商业机会。是什么造成了不同表单之间出现如此大的体验差异，我们又该如何做才能设计出令用户愉悦的表单呢？在实际项目过程中，总结出一套适用于移动端表单设计的路径图-通过做好五个步骤，设计出令人愉悦的表单。

2.1 表单框架选择

合理的表单框架选择是打造用户友好型表单的基础，在进行表单设计时，我们首先需要依照表单的使用场景和复杂程度，选用最为恰当的表单框架。确定好表单框架，也就决定了后续设计中表单信息如何组织以及呈现。我们将表单框架划分为“录入方式”、“标签布局”和“按钮逻辑”三个部分，在表单设计时通过对这三个部分的选用来确定最终的表单框架形态。

2.2.1 录入方式

按照表单录入方式的不同我们大体上可以将表单录入方式分为“单步录入”、“分步录入”和“分级录入”三种，在进行表单设计时需要根据实际情况选择与使用场景匹配的录入方式。

1 单步录入

单步录入是表单中最为常见的录入方式，在一个页面内呈现所有的录入项，结构简单，快速录入、快速提交，适用于录入项较少的表单。

2 分步录入

相对于PC端而言，移动端手机屏幕尺寸较小，一份在PC端1-2屏就能完全展示的表单在移动端往往需要7-8屏。将一个需要7-8屏才能展示完整的表单放在一个页面内让用户填写，用户容易产生抵触情绪会造成表单完成率的降低。

为了提高用户填写效率，减少用户的抵触情绪，我们可以将一个冗长的表单拆分成多个步骤，分步录入。通过拆分成一个个步骤，让表单信息呈现更为清理有条理，并且能引导用户逐步填写完成表单录入。

当表单处于以下4种场景时选择建议选用分步录入模式:

1.表单录入项过多，在一个页面内已经不能合理清晰的组织传递信息。

2.表单内容的录入方式存在较大差异，不适宜在一个页面内进行展示。

3.表单录入项在业务上存在先后顺序，只有先完成上一步字段录入，才能够进入下一步。

4.在业务上很重要的表单，为了让用户能够沉浸、快速的完成表单填写时。

分布录入模式下步4种步骤导航选择：

1.文字导航：当表单为2步录入表单时，我们展示步骤条带给用户的引导意义并不大，通常这种情况下我们会选择省略掉步骤条，只展示当前步骤名称，给予用户提示。

2.步骤条导航：当表单录入步骤为3-4步时，我们可以在页面顶部放置步骤条显示所有步骤内容标题，用户通过步骤条能够对表单有一个清晰的预期。

3.双层步骤导航：当表单录入步骤大于4步时，受限于移动端屏幕尺寸，横向上不够容纳步骤数太多的步骤条，这时我们可以其中某些关联的步骤归纳为一个大步骤，形成双层步骤导航。

4.进度条导航：当表单录入步骤大于4步，又担心双层导航给用户传递出表单极端复杂的印象，劝退用户。这时我们可以使用进度条导航，用百分比进度条来展现表单填写进度。

3 分级录入

分级录入大家可能相对较为陌生，分级录入在B端产品中会有相对多见，一般运用于有明显上下级关系的表单，如项目管理工具中新建任务表单，在新建任务的同时还能新建下属子任务。又如客户关系管理软件中，新建订单的同时新建下属的订单明细。我们可以将使用分级录入模式的表单视为两张表单，子表单添加的数据会回显到主表单上。

2.1.2 标签布局

标签用于提示用户需要输入的是什么信息。合理的标签布局结构，能够提高用户的阅读效率，还能降低信息填写时的错误率。常见的标签布局形式有：左右结构、上下结构和浮动结构。不同的标签布局都有各自的优点和缺点，我们需要根据项目实际情况来选择最合适的标签形式。

1 左右结构

左右结构是目前最为常见的标签布局形式，左右结构中标签和输入区域在一行内排布，其中标签位于左侧且居左对齐，输入项位于右侧有居左和居右对齐两种对齐方式。

优点：节省纵向页面空间，在移动端有限的页面空间内能展示更多的录入项。

缺点：标签的长度无法确定，视觉上显得参差不齐，表单的信息浏览和填写效率一般，标签横向展示空间有限，对于多语言适配场景不太友好。

2 上下结构

上下结构也是我们能够经常在表单中见到的标签布局形式，上下结构中标签位于上方且居左对齐，输入区域位于下方也为居左对齐。

优点：用户的视觉浏览路径相对于左右结构来说较短，拥有较强的信息浏览和填写效率，标签横向展示空间充足，对于多语言适配场景友好。

缺点：占据纵向空间多，一屏内能展示的录入项较少。

3 浮动结构

Material Design中文本录入的标签形式就是选用的浮动结构，在浮动结构中标签和提示文字合二为一，正常状态下，标签位于输入区域内部原本提示文案的位置，当用户输入时，内部的标签就会上移为文本输入让出空间，完成填写后标签和输入文案上下排列展示。

优点：结构简单，视觉干扰少，信息浏览和填写效率高。

缺点：填写项过多时，表单信息传递不够清晰。

4 内部结构

内部结构相对于前面3种结构较为少见，比较长出现在登录场景，在浮动结构中标签和提示文字合二为一，正常状态下，标签位于输入区域内部原本提示文案的位置，当用户输入时，内部的标签就会消失，完成填写后只展示输入文案。

优点：结构简单，视觉干扰少，聚焦于操作。

缺点：只适用于如登录等录入项极少的场景，一旦录入项变多，由于录入后不展示标签，将导致用户后续很难判断输入的信息是否准确。

2.1.3 按钮逻辑

按钮作为表单的重要组成部分之一，合理的按钮逻辑能够为用户顺畅完成表单填写提供帮助，表单的按钮逻辑主要由按钮的位置和按钮的点亮逻辑两部分组成。

1 按钮位置

按钮在页面中的位置情况主要有以下3种：

1.顶部按钮：以文字的形式固定在顶部导航栏的右侧，顶部按钮尺寸较小，因为它所占空间有限，因此在操作上相对来说不便于点击。所以这类顶部按钮更适用于「编辑页面」，需要用户谨慎操作。

2.表单底部：按钮跟随表单放置于表单的最下方，根据表单内容纵向空间的大小而上下移动。因为表单内容较多时，容易下沉过多而导致按钮不可见，所以将按钮放置于表单底部更适用于当表单录入项较少不足半屏的场景。

3.设备底部：操作按钮常驻在设备底部展示，适用于表单录入项过多的情况，在表单设计时可以尽量将必填项放置在表单前面，用户填完必填项后就可以点击操作按钮提交或者进入下一步，而不用滑动到表单底部再进行操作。

2 按钮点亮逻辑

1.当表单录入项较少时，且有明确预期按钮何时可用，可以先置灰主按钮，完成必填项填写后再点亮主按钮。

2.当表单录入项较多时，且用户不清楚为什么按钮不可以用，此时按钮可以常亮，并在用户点击时给予反馈，告知错误原因。

2.2 表单信息梳理

在确定好表单框架以后，对于表单内容信息的进行有效的组织也尤为重要，特别是对于一些结构复杂、录入项多的表单，如果不对信息进行组织，很容易显得繁杂混乱，容易让用户在一开始就产生抵触的情绪，甚至选择放弃。那么如何合理有层次的组织信息呢？

2.2.1 简化表单，聚焦核心

我们在设计表单时潜意识里都想要从用户那里获取到更多的信息，表单中因此出现很多必要性较低的录入项，表单也因此变得冗长，让人第一眼就生出「好多信息需要填，好麻烦」的沉重感，在填写表单之前就萌生退意。我们在进行表单设计时需要保持克制，聚焦于表单的核心任务，让表单尽量短而美。那么我们要如何为表单减负，可以尝试以下方法。

1 减少表单中的多余字段

表单中每多一个录入项需要填写，都有可能会失去一部分用户好感度甚至流失一部分用户。在设计时我们需要判断某个字段信息对于用户来说是否有必要在表单中进行填写，尽可能的删减掉额外的无用字段。例如注册表单，如让用户使用邮箱注册，那么用户的姓名字段是否是注册的必选项？如果不是必选项是否可以在之后的信息完善中进行填写。

2 合并表单中的同类字段

在表单中时有一些信息他们本身紧密相关，我们完全可以视情况将其合并为一个录入项，来减少不必要的录入操作，达到简化表单，提升录入效率的目的。合并录入项要结合实际的使用场景以真实的提升表单体验为目的，而不是一味的追求表单的最简化。

3 隐藏表单中的低频字段

根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。例如一份表单中有一个填写项，90%的用户都不需要填写，那么默认收起。保持表单的简洁，让绝大多数用户快速完成，避免大量的表单给用户的焦虑，而又满足了小众用户的需求。

2.2.2 先易后难，循序渐进

根据沉没成本的定义：人们在做决策时，受到了自己过去所投入的时间、金钱、精力等因素的干扰，对于先前付出了投资的事情有更强的忠诚度和继续投资的意愿。进行流程设计时也可以遵循这个原理，将容易完成的表单放在前面，这样做有3个好处：

1.简单的表单更容易激起用户的填写欲望，用户会迫不及待地去完成。相反，用户一开始就看到过于复杂的表单，很容易被吓到，从而放弃整个任务。

2.用户通过完成简单的表单，可以增加自信心，即使后面的表单变复杂了，用户也更有耐心去完成。

3.当用户将前面简单的表单完成后，放弃整个表单的机会成本就变高了，即使后面碰到较难的任务，用户放弃的几率也会降低。

2.2.3 信息分组，一目了然

当我们我们设计的表单字段内容较多时，需要合理的对字段信息进行分组，这样整体看起来更加有组织性。接近性（格式塔原理）原则告诉我们：相互靠近的物体被认为比相互距离较远的物体更有关联性，这样能使设计界面层次有序，视觉清晰，减少视觉噪音。分组时需要注意：

1.内容属性相近或有关联性的放在一组。

2.根据信息的重要性及难易程度排列分组，将选填的表单内容靠后

2.3 录入操作提效

在表单录入设计阶段，我们需要明确认识到一点，用户在面对一份表单时往往没有我们想象中的那么有耐心，复杂繁琐的录入操作可能会直接劝退用户。我们需要做的就是化繁为简，思考如何给用户减负，让用户简单高效的完成表单录入。表单录入操作提效有一些切实可行的方法，下面请我将一一向分享。

2.3.1 设置默认值

对于用户而言，填写信息永远都不是一件有趣的事情，在对用户足够了解的前提下，我们可以选择为表单中的部分录入项提前设置合理的默认值，节省用户的操作时间。默认值的设置不是一个随性发挥的过程，而是基于用户行为和数据的理性判断，并且也不是每个字段都适合设定默认值。关于如何设置合理的默认值，什么字段适合设定默认值，下面几点可供大家参考：

1 自动填入已有信息

在一些业务场景，会使用到用户之前在其它表单中已经录入的信息，此时在填写新表单时，可以默认带入之前的数据。

2 自动填入关联数据

如果用户正在填写的内容有相关的关联数据，可以默认带入。如我们在填写订单时可以默认带入该订单关联的商品基础信息。

3 系统自动获取数据

基于移动端设备的能力，我们可以在用户开放权限的情况下获取一定的用户信息（位置信息、电话区号、运动数据等），在特定情况下默认填写，如滴滴通过GPS定位自动帮用户填入上车位置。

4 经验预判填入信息

像电话区号、证件类型、国籍等用户录入结果相对固定的字段，可以根据情况提设置合理的默认值。

2.3.2 减少手动输入

相较于PC端而言，移动端设备屏幕尺寸较小，虚拟按键的输入效率远不及实体键盘，在移动端手动输入的成本较高。因此，为了打造便捷优雅的操作体验，移动端表单需要尽量减少用户的手动输入。以下方法可以减少手动输入。

1 联想输入

联想输入是给予用户输入字段的自动补全功能，用户少量输入后进行选择。录入方式由原来的输入变成半输入后选择，减少用户的输入成本，提高用户操作效率。

2 替代输入

对于表单填写过程中可以固化选择的信息，应让用户进行选择操作以代替手动输入，尽可能地让用户减少输入成本。

3 历史记录

一份用户可能会多次填写的表单，我们可以提供用户的历史输入项供其选择，如滴滴的打车页面会将我的常用目的地放置在目的地输入框的旁边供我快速录入。

4 新型组件

一些新型的交互组件的使用能够简化信息录入的操作，例如滑块组件等。

2.2.3 减少页面跳转

在填写表单时如果填写项需要频繁的页面跳转会使得整体的填写效率变低，增加用户的操作成本。在进行表单设计时应尽量规避这种频繁的页面跳转，选用更流畅灵活的交互方式。

1 选项露出

在网页端表单设计中，用户在表单填写中需要对选项进行选择时，常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端设计中，触发选择器后的二次点击会增加用户的填写成本。所以在设计时，当选项少于8时，在表单中直接显示所有可选项，当选项超出过多时则在列表浮层中进行选择。

2 减少跳转

在表单填写中我们期望用户保持专注，尽量避免产生引导用户离开当前页面的填写交互，这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。

2.3.4 智能录入

1 OCR识别文件内容

对于一些标准证件类信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。值得注意的是，如果图片不清晰或存在水印，将大大降低识别准确度。此时应提供修正渠道，让用户可以逐一校对并修改文本内容。

2 号码认证

短信验证码升级方案。直连三大运营商，一步校验手机号与当前SIM卡号一致性。优化注册/登录/支付等场景验证流程，有效提升拉新转化率和用户留存率。不做数据加工与号码精准营销，保护用户隐私。

2.3.5 联动键盘

为了避免让用户频繁的跳入跳出相同类型的输入项，首先整合表单的信息字段，将同类型的字段进行合并，同时结合输入控件，设计联动式组件，让用户在表单输入时更加高效。

2.4 设计细节把控

设计不是简单的元素拼凑，深入下去，有很多细节需要推敲，细节应该是含蓄的，包含在整体之内。好的细节设计不容易被用户的眼睛直接发现，但是会让用户与产品的交互过程变得通顺、舒适，概括来说就是润物细无声。对应到表单设计上，我们需要通过表单设计中的细节把控，让表单录入这件事变得简单、高效。

1 必填与选填

当表单中同时出现必填项和选填项时我们需要对其做出区分，避免用户不知道哪些字段必须填写、哪些字段可以选择性填写。沿用通用符号习惯，在表单中我们往往使用 * 号来标记必填项。但是当表单中的必填项多于选填项时，大量的 * 号会增加用户的认知负担，面对这种情况，我们可以使用暗提示来标记选填项帮助用户识别。

2 号码组合规律

如电话号码、银行卡号这类有数字组合规律的号码字段，我们可以沿用它们在线下的数字组合规律，通过空格对号码字段进行划分，帮助用户校验和阅读。

3 密码保护

出于保护用户账号安全考量，我们在进行密码输入时通常使用隐暗文字的方式来保护用户账户安全，但是暗文字的显示方式会让用户无法确认密码信息。因此我们可以在输入时，让输入字段短暂显示，保持1秒然后再转变为暗文字，这样既可以让用户明确内容，也保证了用户的账户安全。

4 符合心理预期

我们在进行表单设计时，输入区域的长度要符合心理预期，需要预判填写内容长度来确定输入区域的长度。这样不仅在体验上一致，而且在视觉体验上更加愉悦。

5 对指令有明确的称谓

用户应该对他们的操作所带来的结果非常自信，使用“提交”、“注册”、“立即支付”、“创造账户”等确定性文案来描述用户将采取的操作。

6 错误信息就近反馈

报错信息应当一目了然，从用色、图标到文本都应当起到高亮的效果，而且报错信息应当靠近输入框，而非表单的底部或者顶部或者按键旁边。

7 防止输入框的遮挡

在设计主要由文本输入框构成的表单页面时，要考虑键盘出现可能会遮挡输入框的情况，我们需要把控件放在scrollView上，当键盘会遮挡输入框时,则表单滚动。

8 指导性错误反馈

对于异常情况不能只是冷冰冰的告知失败，这样容易给用户带来挫败感，且缺少下一步操作指引。错误反馈不应该只着眼于结果，错误反馈的阐述角度应该是引起用户关注、让其快速了解出错情况，并指导如何处理。

2.5 整体体验提升

经过前面几个步骤，表单整体形态已经确定，最后一步我们需要从整体体验的角度对表单进行完善和调整。包含表单的容错性考量、表单流程闭环的打造、视情况而定的趣味性设计。

2.5.1 表单容错性考量

即便你的产品90％的时间都运行良好，但是如果在用户需要帮助时置之不理，他们是不会忘记这一点的。——《Getting Real》

容错性概念源于计算机领域，容错性是指计算机系统在发生故障的情况下，依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。延伸到互联网产品设计领域，容错性的范畴更为宽泛，包括降低用户操作的出错率、及时提供纠错帮助、提供解决方案等内容。

容错设计与用户体验息息相关，我们在表单页面设计时也需要进行容错性考量，尽量避免用户错误操作的出现。当用户出现错误操作时，帮助用户识别、诊断，及时反馈问题所在，并提出有效的解决方案，帮助用户快速从错误中恢复。让表单填写流程更顺畅，给用户带来更优的用户体验，关于表单容错性设计可以从以下几个方面来进行。

1 引导与提示

引导和提示要突出表现，从而引起用户关注，确保用户在操作前能注意到引导或提示信息。引导与提示用语要简单且易于理解，当重要或操作不可逆时，要询问用户让其知道这样操作的后果。

2 限制操作

如何从设计上避免用户出错，限制是一种非常必要的方式，可以通过限制用户的某些交互操作或者增加某些操作的难度来对用户操作进行限制避免用户出错。

3 反馈与帮助

当用户出现填写错误时，及时的反馈错误并提供纠错帮助，出错信息应当用清晰准确且用户易于理解，能够对用户解决当前问题提供建设性帮助。

4 错误恢复

允许用户犯错，操作者能归够撤销以前的指令，帮助用户在犯错以后能够快速回到正确状态。

2.5.2 表单填写流程闭环

表单的终点并不是提交，一个好的表单设计需要兼顾考虑用户填写前的引导、填写时的及时校验与帮助、还有填写后的整体流程体验，为用户提供完整的、形成闭环的表单填写体验。

举个例子，当我们设计的表单需要用户准备如身份证、银行卡这类的证件时，需在表单填写前告知用户，避免用户填写途中才发现证件未准备，导致用户填写流程中断。再如，用户在填写完证券开户表单后，其实还需要通过审批后用户才能进行入金交易等操作，这时我们需要一个结果页来告知用户表单提交的结果状态和下一步的操作指引。

2.5.3 最后，再增加一点愉悦度吧

表单设计并不一定需要是严肃且正式的，在表单设计时可以尝试引入一些趣味性的元素，研究表明，更大的文字输入框、适度的留白空间、优雅的动画效果、趣味性界面设计会让人心情愉悦更有填写的欲望。

例如bilibili的登录页面，在用户输入账号时上方的卡通形象是睁眼的，当切换到输入密码或者验证码时卡通人物会有一个捂住双眼的动作十分有趣，这样的趣味性设计能够在一定程度上缓解用户在填写表单时的焦虑情绪，并增加对于bilibili保护账号安全的信赖感。

总结

以上就是我对于移动端表单设计的一些归纳和总结，过往的项目中自己设计大量的表单页面，走了不少弯路犯了不少错误，但也通过项目不断的反思总结，收获不少的关于表单设计的经验。在这里将项目中关于表单的一些思考和经验分享出来，总结出自己的一套关于表单设计的方法论，也是希望能够对正在进行表单设计或者即将进行表单设计的你提供一点点参考与帮助。

表单设计我将分为上下两期来向大家分享，体系化表单设计（上期）主要介绍在项目中总结出的表单设计中的方法论，下期则是介绍方法论在我们项目中实际的应用，也希望你能够持续关注。

文章来源：站酷作者：Yone杨

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3959)

222021-4

不同场景下【用户提示】的设计原则

涛涛

不同场景下用户提示的设计原则

什么是提示？提示，指给予题型和解释。提示指启示；提起注意。映射到现实生活中，教学楼“请保持安静”、厕所的标示提示、饭店里禁止吸烟的牌子都是提示，是用来提醒人们注意自己的语言、行为

根据不同到使用场合这里梳理了5中提示操作的使用控件：分别是弹框提示、常驻提示、通知、全局提示、徽标提示，这五种提示方式承载的信息量、优先级和用户操作场景各有不同

下面分别介绍这5种提示控件的使用场景：

一、弹框提示Modal

使用场景：

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用在当前页面正中打开一个浮层，承载相应的操作。

另外当需要一个简洁的确认框询问用户时，能够让用户清晰的知道自己的操作，并且进行二次确认

设计原则：

聚焦：使用户集中注意力确保任务得到解决，对话框一旦出现，应当呈现在页面上方的视觉层。

清晰：对话框应直接展示信息，并带有相关或上下文信息响应用户任务或操作。

控件类型：

1、功能对话框：

除标题、纯文本内容和按钮外，还需要承载更多复杂信息时

可配置单选框、复选框、列表、穿梭框、图片、头像、插画、视频等

2、通知对话框：

用于警示、紧急、或简单的二次弹窗确认。

按钮文案需承接上下文表述，并准确引导用户行为，如“确定”、“取消”、“删除”。

简单的消息提醒时或不可返回的操作，只提供一个按钮用于关闭，如“知道了”“刷新”。

3、选项对话框

内容不足以构成单独页面或不希望跳转新页面的对话框，多使用于搜索、设置、内容选择；
需要完成的一系列任务操作，被选择后立即生效，无需进行确定反馈；

二、常驻提示 Notice

使用场景：

常驻提示是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

设计原则：

直接：当前页面需要向用户显示需要关注的信息时，常驻提示显示，要求用户立即注意；

重点：常驻提示引起用户注意，以确保其内容得到解决。

控件类型：

常驻提示属性包括常规提示、成功提示、警示提示、错误提示四种。

普通提示：建议用于展示背景条件、政策信息、规范要求、当前状态等客观内容。

成功提示：建议用于展示已完成操作的成功状态。

警告提示：建议用于展示可能会导致某种后果的警示性文本。

错误提示：建议用于展示一个信息组的报错文本，如表单中同时满足几个条件时触发整体报错，可用此样式。

三、通知Notification

使用场景：

在系统四个角显示通知提醒信息。经常用于以下情况：

较为复杂的通知内容。

带有交互的通知，给出用户下一步的行动点。

系统主动推送。

设计原则：

提示文本内容以及交互方式尽量准确、清晰、简明，保证用户在其消息自动消失前了解提示信息或做出交互。

控件类型：

1、基础样式：分为基础文字通知、基础文字通知（带操作）

2、根据业务需要在区域内填充内容或操作类组件的通知。

四、全局提示toast/ Message

使用场景：

通常出现时显示几秒后自动消失，或者数据正在加载时显示，提醒用户已经完成的动作，或者已经达成的目的，是用户完成动作后或者异常情况下的提示（pc端叫 Message，移动端叫toast实质上都是全局提示是一个控件）

设计原则：

在不跳转页面打断用户工作流程的前提下，提供成功、警告和错误等反馈信息。不打断用户操作

控件类型：

1、刷新页面时，提示更新的条数：

2、收藏或者其他操作，提示用户操作成功：

五、徽标提示 Badge

使用场景：

红点、数字或文字，一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

设计原则：

跨平台：可适用于 Windows/macOS/iOS/Android 平台的所有套件产品，为产品提供一致的设计体验，使用户在不同端使用产品时，都可以拥有流畅高效的使用体验。

直观：通过清晰醒目的视觉形式告知用户状态，吸引用户关注和处理。

控件类型

1、点状徽标

当功能模块更新、信息状态为未读、人员在线协同、信息量变化且无需告知具体数量或性质时，使用点状徽标突出状态

2、字符徽标

内容的信息量发生变化，且需要明确告知新增数量时

3、图标徽标

在某些功能场景中，作为特殊状态提示使用

4、角标徽标

通常出现在列表、卡片上，强调和突出其特殊状态，其主要作用是标记，或吸引用户的注意力，提示用户关注该事物或事件

总结

简单的总结，并不是非常全面，还有很多需要继续挖掘的技巧，还有很多需要学习的东西；有一点能够肯定的是，要从实际的用户场景中去考虑问题，用户体验就必须站在用户的角度，不能为了设计上的美感，而让增加用户学习成本，好的体验应该就是用户一眼就能看懂，操作简便。

文章来源：站酷作者：郭大毛

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3264)

212021-4

小米商城APP首页设计全面解析！

鹤鹤

前言

互联网产品首页是与用户进行交流的第一步，首页设计不仅代表着一家企业的形象，还会直接影响公司的业务营收和口碑。

本文将深度解析“小米商城”APP的首页设计，分析B2C模式下的自营电商是如何通过设计打造品牌感，增加用户参与感，从而促进产品的销售转化。

产品定位

了解一款APP产品首先要了解它的产品定位，从小米商城的slogan“让每个人都能享受科技的乐趣”不难看出小米的产品定位是性价比高的科技类产品。

另一方面，从商业模式来看，小米商城是B2C自营电商，与其他B2C自营电商平台不同的是，小米主打高性价比，以好口碑深入大众，撬动市场，以互联网思维卖产品，把硬件产品当互联网软件产品卖。

由此可见，科技、高性价比是小米商城产品定位的两大关键词。

目标用户

目标用户是产品模式和功能制定的重要考虑因素，小米商城的目标用户可以分为三类人群：

1、米粉用户

这类用户是小米的忠实粉丝，也或许是雷总的粉丝，他们认同小米文化，喜爱小米产品，热衷购买和传播小米产品，是小米商城最有价值的用户群体。

2、科技发烧友

这类用户本身就是科技爱好者，喜爱探索新鲜前沿的科技产品，热衷购买科技类创新性的产品，对于深度发烧友还会专研参数配置，并会在论坛探讨分享。

3、追求小资用户

这类用户追求品质，喜爱有设计感的产品，如果了解到小米有什么产品好看又好用，他们会为了保证品质和服务，选择从官方购物平台购买。

全品类商城与自营商城设计差异

虽然了解了小米商城的定位与目标用户，但还需要从产品的商业模式上去推导设计，比如淘宝与小米商城的首页设计大有不同，原因就是因为商业模式不同，致使产品的设计存在差异。

1、全品类与自营首页设计区别

自营类商品其实是全品类商城的一个分支，全品类商城首页衍生了很多独立平台，所以全品类商城首页设计形式上更注重流量分发，而自营类是垂直领域，所以会更突出商品，并且创造商品卖点，打造爆款。

全品类电商产品因为品类众多，用户长时间使用会形成“逛”的习惯，从运营的角度，首页运营板块就会以千人千面的形式出现各类产品，所以首页在设计上需要放置更多的产品，甚至要不停的变化产品，以覆盖到用户的需求点。

而自营类电商产品，因为品类较少，用户很难逛起来，也是因为用户使用自营类产品本身就是带有目的性的，这样用户通常会是“找”的行为，所以首页的功能上通常会推荐主题产品和打造爆款。

2、自营类商城设计上注重品牌

自营类商城运营的是品牌，能发展壮大的自营电商都成功塑造了品牌形象，所以在产品设计上突出品牌，会与用户建立信任感，提高转化，同时也能做到与其他电商的差异化设计。

下图所示，小米商城、小米有品、网易严选三款产品，为了能快速与用户建立品牌认知，导航栏都放了自家的logo。

另外，还可以从色调，板式，服务等等各个纬度突出品牌形象，总之在产品设计上要与品牌形象贴合，让用户处处能感知到品牌。

导航栏设计注重品牌

了解产品定位和目标用户以及平台的商业模式，对我们分析一个产品非常重要，这样更容易从正确的方向理解产品的设计，下面我们带着对产品定位和目标用户的理解，开始对小米商城APP首页设计的全面解析。

小米商城-首页解析

B2C模式下的品牌电商，首页设计需要做到可以让任何一款产品成为爆品，也不会让任何一款产品出现库存滞销。

小米商城首页的设计与运营紧密联系，有带货能力超强的模块，如小米众筹、小米秒杀，也有能快速推广新品的模块，如小米新品、新品发布，这些都是品牌电商重要的组成部分。

接下里我们从品牌DNA、布局体验设计、金刚区设计、登录前后设计、参与感设计等方面对小米商城首页进行解析。

1、品牌DNA

当前小米公司有着非常强大的品牌势能，给人们留下了性价比高、高端、简约、科技、坚持的好印象，这些都可以看作是小米的品牌DNA，因此在设计小米商城APP时，设计需要贴合小米品牌DNA，让用户使用产品时能感受到小米的品牌力。

打开小米商城APP，处处能感受到小米的品牌元素，橘色的品牌色、小米的产品图标等，都在传递着小米的符号，整体UI的设计秉承了小米硬件产品的一贯风格，如简约的风格、高质感元素等，细节上体现品质。

2、布局体验设计

用户浏览电商产品首页，第一屏流量最高，随着往下走第二屏、第三屏...跳失率会越来越高，根据数据统计通常产品第三屏之后流量会大打折扣。

双十一期间截图

上图的数据并不能代表所有产品的数据，好的设计形式可以影响数据的变化。

如何减少跳失率，要从用户在当前位置的所思所想出发，做好第二屏到第三屏的功能制定和引导设计非常重要。

小米商城首屏最后的位置可以看到第二屏的内容标题，能够起到引导性作用，并且放的是最有吸引力“小米秒杀”和“新品发布”双十一期间增加了运营模块，虽然这两块在第二屏，但看到的同样是最有吸引力的双11促销信息。

引导用户查看内容

另外在不增加运营板块时会发现，小米商城重要板块不会放到第三屏，在第二屏下面已经开始出现精选（猜你喜欢）闲逛区，因为是太多板块用户会感觉首页很乱，不容易对各板块功能形成认知，其次就是随着跳失率的增加，重要板块也会失去好的转化效果。

打造沉浸式体验

多数用户在第三屏时会失去再向下探索的动力，这时系统通过算法给用户推荐用户喜欢的内容，会再次吸引到用户，重塑用户向下探索的好奇心。

用户在“猜你喜欢”版块心态是无目的的闲逛，当用户不想再向下探索时，随时可以侧滑屏幕切换到其他品类，这样也大大减少了用户首页闲逛的跳失率，营造出了一种沉浸式的交互体验。

闲逛区（猜你喜欢）沉浸式体验

同时因为用户在此版块是“逛”的心态，所以设计上采用瀑布流，也可以称为Feed流，这样的设计形式重点突出的是图片，也就是商品本身，参数配置会弱化或不出现，因为用户闲逛时是没有目的的，当一个商品对他吸引后，用户才会主动点击查看详情。

如果用户是有目的搜索某个或某个品类商品时，此时列表流更为合适，因为用户是有目的性的查找商品，他是认识这款或这类产品的，所以必定会开始关注产品的参数配置等，列表流的左右结构，能非常合理的呈现出参数配置等信息。

总结：当用户无目的“逛”时会关注产品本身，所以这时需要重点突出产品图，使用瀑布流更合适；当用户有目的查找商品时，因为已对商品有一定的认识，所以不仅希望看到图片，同时也希望能够直观看到产品的参数配置，这点对科技类产品的展示尤其重要。

3、金刚区设计

小米商城-金刚区

金刚区的图标设计直接用产品来代替，真实的手机、电脑、笔记本等，这样不仅能与众多电商平台的金刚区有差异化，更加能够把入口功能表现的有识别性、直观性，能够使用产品模型作为图标元素，这本身形成了一种优势。

“触碰想象，感受真实”金刚区的图标设计符合小米的设计理念，设计师从图标的设计营造出了贴合目标用户认知的氛围，让用户感受到了归属感。

金刚区图标的布局设计与产品定位和用户特征非常吻合，第一个图标是“小米新品”，对于米粉来说，这应该是最关注的功能入口，关注新品的用户也是最容易购买新品的人群，从产品的角度来讲，新品也是需要大力推广宣传的，所以新品入口放置首位无可厚非。

第二个是“小米众筹”，此功能入口对于追求性价比的用户是最有吸引力的，因为众筹价低于零售价，符合性价比属性，此模式是先付钱再生产，解决了库存、物流成本等。

第一排剩下的是三个手机图标，其中位于中间位置的“至尊新品”是动效展示，也是因为要强调和推广新款手机。

“小米秒杀”放在第二排第一个，是因为此模块也非常重要，是一大流量入口，秒杀功能板块是利用时间的紧迫感来刺激用户转化，走量能力极强，正因如此，在页面的下方有专门的“小米秒杀”板块。剩下的四个图标是小米生态链中四个类别的产品入口，代表了大多数产品。

4、登录前后设计

新人首次打开产品，促进第一单购买

小米商城新用户第一次打开产品时，会直接弹出“新人专享福利”弹窗，点击查看都是性价比极高，且生活中常用的物件，性价比高是为了促进与新用户的第一笔交易，推荐常用物品是为了让用户在生活中看到用到这些常用物品时，可以想到物品的购买渠道，从而提高复购。

新人登录前，首页内容促进第一单购买

如果用户不小心关闭了弹窗，没关系在首页最重要的位置也会看到“新人福利”板块，如果享受新人福利，那在购买前一定要做的是要注册登录的，所以新人福利，不仅可以促成与新人的第一笔订单，而且也有助于引导新人成为注册用户。

新人登录后，继续促进第一单购买

从下载小米商城到登录后，会有三次提示有新人福利，上面介绍了前两次，第三次是当登录后会直接跳转到“新人专享福利”，目的还是促成一单有性价比的交易，给用户留下第一次好的购物体验，最终变成有价值的用户。

不包邮是用户最大的痛点

据调查电商购物，用户最大的痛点就是不包邮，同样一件商品，99元包邮比90元+8元快递费组合更容易让人接受。

上图小米商城的新人福利，都在强调包邮，消除用户痛点，让用户的首次购物真正的感受到小米商品的性价比。

个人中心登录前后有意思的设计

小米商城登录前后在个人中心有个地方的设计非常有意思，看下图未登录前的5个图标设计，相信身为设计师的你一眼就能看出“钱包”的图标偏小，这是为什么呢？

登录后才发现，较大的四个图标都会换成数字，数字的大小正好与钱包图标的大小视觉上一致，设计师似乎很淘气。

登录后数字与图标大小视觉上一致

5、参与感设计

小米商城的商品具有低频购买的属性，如手机、家电等，好在商品的种类相对较多，小米也在不断的研发新品，为了促活，小米商城在设计上有很多参与感的设计。

小米商城有“星球”板块，可以理解为是一个基于产品讨论为导向的社交平台，这样的功能就是让用户有参与感。

当对比华为商城和OPPO商城后，发现华为与OPPO只是把产品呈现出来，却很少有让用户有参与感的设计，而小米商城处处都在打造参与感设计，如游戏化设计、互动平台等等，当然这些功能的设计与小米主打性价比和粉丝属性的用户有关。

在小米商城的首页用户可以打开红包雨游戏功能、答题领红包功能、智取盲盒机功能等，这些虽然都是营销策略，但因为趣味性、游戏化的设计也大大提高了用户参与感，从而增加了销售机会。

最后

对于负责流量分发的首页，不仅要引导用户浏览和购买商品，给用户创造优秀的产品体验，首页也是体现公司品牌形象的关键点位，品牌形象能够让用户了解你、信任你、感受到价值，从而促成购买转化，这些都可以用设计助力表现。

以上讲的是UI设计前的探索工作，也是非常有必要的工作，产品设计者只有真正了解了产品的底层架构，才能精准的把控设计，在各方面掌握好平衡。

文章来源：站酷作者：吴星辰

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3722)

212021-4

设计师要懂的用户习惯

鹤鹤

前言：

前些天对用户习惯进行了总结，这两天重新优化了一遍。我们在互联网产品的设计过程中，有时会听到一个词：用户习惯。设计师希望尝试更多新颖的交互方式、视觉效果，却常常容易被其他人挑刺指出不符合用户习惯，建立在用户习惯上的创新才是好的体验。

尽管设计师经常将用户习惯挂在嘴边，但是却很难有人说出用户习惯究竟是什么？我们如何判断所做的设计是否符合用户习惯？用户习惯是否始终不能打破？道理我都懂，就是不会做，实际上确实是这样，因为很大程度上取决于设计师对用户习惯的理解深度。

用户习惯本身很难被量化，但是不代表就是一个模糊的概念，你仍然能从用户反馈、操作行为数据对比等分析中一窥究竟，用户习惯是可以随着设计师的学习、经验、眼界等的提升而提升的。

什么是用户习惯？

心理学上认为，习惯是人在一定情境下自动化地去进行某种动作的需要或倾向。或者说，习惯是人在一定情境中所形成的相对稳定的、自动化的一种行为方式。习惯形成是学习的结果、是条件反射的建立、巩固并臻至自动化的结果。

所以，习惯有两大特点：

需要注意的是，“长期”本身是是没有明确时间界限的，更强调多次的重复。这里的习惯，侧重于描述“习得性”，即人们通过经历、学习、刻意练习等方式形成的，所以这种习惯理论上是可以被改变的。

此外，习惯还有一种潜藏特性，区别于上面描述的“习得性”，是天生的、物种特有的行为模式。比如人空腹状态下，闻到香的食物会产生强烈食欲。这种特性习惯是刻在基因里的，几乎无法被改变。

试想，我们在使用 App 时，是否遇到过因为习惯的问题而感觉到不适应的场景？

举个最常见的例子，Windows 与 Mac 系统的软件关闭方式。使用 Windows 的电脑时，我们形成了关闭操作在右上角的自然习惯。后来开始使用 Mac 电脑，关闭方式都在左上角，在一段时间内，每次关闭时都感觉到格外不习惯。而 Mac 的关闭方式没有比 Windows 产生显而易见体验升级，改变操作习惯成本高，部分用户可能会认为 Mac 的关闭操作不好用。

当然，假如最开始接触的是 Mac 电脑，再使用 Windows 电脑，也会自然认为 Windows 不好用，这是先入为主的观念，一旦产生习惯，改变习惯将产生一定的学习成本。

用户习惯的产生

设计师需要思考用户行为的本质，而尽量减少主观判断。产品是给人使用的，所以了解人们的行为特征很重要，而只要涉及到对人本身的了解，就是极其复杂的，人类对自身的行为特征了解远远不足，但这不妨碍我们以现有知识去做一些分析和判断。

用户行为习惯的产生，与记忆的特点有很大关联，我们可以把记忆划分为外显记忆和内隐记忆。

外显记忆大家比较习惯和容易感知到，比如我们在学校学习时背诵的课文、公式法则等，可以用语言、文字等显性方式描述出来的记忆。

内隐记忆也叫非陈述性记忆，我们无法用行为描述而又确实存在，比如骑单车，学会之后很难会遗忘。刚开始学习时，会需要意识的介入，经过多次练习，行为会逐渐“自动化”，比如学习开车时，我们会注意力很集中，而习惯开车后，可以一边开车一边聊天。

我们平时说的肌肉记忆、条件反射也和内隐记忆息息相关，而且一旦形成，不太容易改变。需要注意的是，肌肉记忆只是一种简单描述，负责此记忆的是小脑，其实肌肉没有记忆。

所以有时候，我们感觉体验某个 App 时，会习惯性在某页面寻找某功能，或者觉得体验和其他 App 有区别，都可能是内隐记忆的用户习惯引起的。举个例子，某天你刚使用一个没用过的 App ,这时你想要找设置功能，那你大概率会不自觉的点击 App 的最后一个主 Tab (如“我的”），因为大部分 App 的设置功能都在这个场景，用户自然也就形成了习惯。

这里我且采用由心理学家基思·斯坦诺维奇（Keith Stanovich）和理查德·韦斯特（Richard West）率先提出的术语，用以说明大脑中的两套系统，即系统 1 和系统 2。

·系统1的运行是无意识且快速的，不怎么费脑力，没有感觉，完全处于自主控制状态，也叫快系统。

·系统2将注意力转移到需要费脑力的大脑活动上来，例如复杂的运算。系统2的运行通常与行为、选择和专注等主观体验相关联，也叫慢系统。

而这两个系统，是可以互相转化的，慢系统通过刻意练习，把新的习惯注入快系统，而这时快系统就是习惯的表现，这样快系统可以在日常生活中完成大部分工作，这就是我们常听说的熟能生巧，习惯经常能帮我们节省思考的精力，这又让慢系统进一步通过刻意练习，向快系统不断注入更多好习惯。

举个例子，你刚用一个 App 时，可能需要先体验一下你要的功能在 App 的哪个位置，但你用久之后，就会不假思索地找到它。就像你用微信，最常用的功能可能是回复信息、看朋友圈，所以一定会形成习惯。但是假如有人让你找一下微信里面“生活服务”的入口，你可能会先想一下可能出现在什么入口，这就是因为平时比较少用导致的。假如你常用这些入口，也会形成习惯，下次要使用这些功能的时候，就能够快速找到。

避免改变用户习惯

1、挑战用户习惯的风险

既然说到用户习惯的特点是“长期养成”且“不易改变”，那么挑战用户习惯一定会造成不适，甚至引起强烈反感。几年前 Ins 的 logo 改版，将 logo 由拟物化改成了扁平化，颜色也发生了变化。暂且抛开视觉效果不说，从用户视觉记忆上，已经习惯了下图左侧的效果，而右侧新版效果很难与左侧产生记忆上的关联。

许多用户反馈桌面上找不到这个应用、许多用户吐槽很丑甚至不想再使用。所以我们比较容易理解，为什么有时候 App 改版容易反而引起用户的反感，这很大程度上是用户习惯的影响。

2、如何避免挑战用户习惯

产品的用户是谁？

了解产品的用户是谁、用户的行为特点是什么。不同产品由于定位不同，所以用户群体也不相同，用户群体的不同自然代表用户行为特点的不同。如果设计师知道用户群体，但是不清楚具体行为习惯特征，可以尝试让你身边的用户帮你体验。

举个例子，B 站的整体用户画像相对而言更偏年轻化，所以产品设计上，无论是代表形象、UI 风格、交互体验都更显年轻化。而“小年糕”小程序的用户群体主要为中老年人，所以设计上不会显得很年轻，而是以操作明确、字号偏大、去除多余信息为主。

关注竞品的体验

关注主流产品的用户体验很重要，这些竞品的操作往往代表用户的习惯操作（或被培养出来的习惯操作）。大多数情况下，你需要了解竞品能做到什么程度，用户容易将习惯从一个场景带到另外一个相似场景。

比如点外卖，有的用户可能会下载美团和饿了么，尽管平台不同，但是在用户习惯中，操作模式是相似的，所以如果你要让用户的体验不突兀，那就往往遵循相似的操作逻辑。当然这些不是为了让一个产品去抄另外一个产品，而是要追寻更好的使用体验，你的产品比竞品体验更优，就更能吸引用户的青睐。

了解人类的行为/阅读模式

每个人本身都会具有相对稳定的行为、操作、信息阅读习惯，我们能见到的体验好的产品，都是符合用户的基本行为习惯、信息阅读习惯的，要想了解这些习惯，需要了解深层次的交互行为特征。

从操作而言，需要了解用户与界面交互的行为习惯，比如用户的操作（手势操作、信息布局如何才能便于操作），比如尼尔森可用性原则等。

从信息阅读角度而言，需要考虑人们眼睛观察事物的规律，比如格式塔原理：接近性原则、相似性原则、连续性原则、闭合性原则、主体/背景原则、简单对称性原则、共同命运原则。

了解平台设计规范

就移动互联网产品的领域而言，大家都是与手机互动，目前手机系统的两大平台：iOS 和 Android 也都各自有提供关于人机界面设计有清晰的指导，尤其是 Android 的 Material Design ，对于设计师快速了解设计规范、设计原则有很大作用。

iOS 与 Android 的人机界面规范链接：

iOS：https://developer.apple.com/

Android：https://material.io/

培养新的用户习惯

1、何时培养新的用户习惯？

我们提到挑战用户习惯会有风险，但用户习惯并非是永远不可改变的，有时我们需要培养新的用户习惯，也就是大家常说的“教育用户”，否则世界可能一直很难进步。

移动互联网兴起之前，大家都是线下打车，但是滴滴打车颠覆了传统线下打车的用户习惯；以前大家都是现金支付，但是微信支付颠覆了现金支付的用户习惯。

《设计心理学》里面有这么一段话：“如果用新的方式做一件事只比原来好一点，那么最好与以前保持一致。如果必须做出改变，那么每个人都得改变。新旧混杂的系统会让每个人困惑。当新的做事方式明显优于旧的方式，那么因改变而带来的价值会超越改变本身所带来的困难。不能因为某样东西与众不同就认为它不好。如果我们故步自封，我们将永远不会进步。”

改变的价值大于改变的困难

这里的价值包括但不限于用户价值、商业价值（短期价值、长期价值）等，当新习惯会需要用户改变旧习惯时，这个设计带来的价值有多大，值不值得让老用户付出学习成本。有时候，明知改变会引起用户的强烈抵触，仍然改变用户习惯，可能因为改变的价值大于改变的困难。

刚才提到的 ins 的例子中，有的人不知道 ins 为什么要改版，创新咨询公司 IDEO 的沟通设计主管 Remy Jauffret 说：“当品牌、组织超越了最初的商业意图，或扩展业务提供不同的产品，或领导希望吸引新的客户，这些情况都可能需要新的品牌视觉。变化总是大家不舒服，然后又平息，我认为时间才是检验真理的唯一标准。”

改变带来明显的体验升级

我们在设计中，有时候会遇到自己的产品某个功能体验比较差，但是延续了很久，而市面上其他同类产品在相同功能的体验上已经做的很好，我们可以往主流交互体验上改版吗？这时需要权衡改变之后是否能带来明显的体验升级，还是说对于用户来说是不痛不痒的变化，可改可不改？

以安卓为例，在几年前，安卓手机的底部有 3 个实体键，后面手机更新迭代，变成了虚拟三键设计，因此底部存在3个不同功能的热区。而在 Android 4.0 设计规范中，为了避免底部标签栏与已经存在的底部虚拟键产生交互上的冲突，安卓明确说明了不要使用底部标签栏。

但这种规则，在使用体验上、开发者的适配上都发生了问题，用户更接受 iOS 的体验，后面谷歌在 Material Design 中，允许了底部标签栏的存在。这相当于和原来的用户习惯不一致，但却带来了更好的用户体验。

2、如何培养新的用户习惯？

这里结合上瘾模型的触发、行为、多变的酬赏、投入进行阐述，这四个步骤是一个循环，当用户越沉迷于这个循环，说明你的产品对用户的吸引力越强，用户习惯也就越强，这里会侧重于从培养用户习惯的角度进行拆解。

触发：外部触发和内部触发

外部触发说白了就是加强产品曝光，让用户一下子就能想起你。举个例子，“充电五分钟”下一句是什么？你大概率会想到“通话两小时”，这种经过外部的长期触发，最终已经转变成了内部的习惯，会让你记忆深刻。

外部触发的类型主要有4类，通过将信息渗透进用户生活，吸引他们采取下一步行动：

付费型触发：做广告、搜索引擎推广都是付费型触发，争取新用户；

回馈型触发：公关和媒体等领域的触发，比如对产品做正面报道、推荐等；

人际型触发：熟人之间的口碑传播是一种极其有效的外部触发，可以为产品带来“病毒式增长”；

自主型触发：以驱动用户重复某种行为作为重点，让用户形成习惯，比如新闻订阅、每天早晨的闹钟等。

内部触发是用户心理产生的使用动机，内在情绪驱动自己去使用一款产品。

当某个产品与你的思想、情感或者是原本已有的常规活动发生密切关联的时候，那一定是内部触发在起作用。对于习惯刷朋友圈的人来说，拿起手机就不会自觉打开微信；对于习惯刷微博的人来说，拿起手机就会刷起微博，甚至自己都没有意识到。一再重复这种场景，会用户就会对此形成一种稳定的联系，进而形成习惯。

行动

斯坦福大学福格博士曾提出“福格公式”，福格行为模型可以用公式来呈现，即 B = MAT。B 代表行为，M 代表动机，A 代表能力，T 代表触发。只有动机、能力、触发三者皆备，才能跨过“行动线”。

触发：即上面所提到的外部触发与内部触发。

动机：动机决定你是否愿意采取行动。福格博士认为，驱使我们采取行动的核心动机主要是三种：追求快乐，逃避痛苦；追求希望，逃避恐惧；追求认同，逃避排斥。

能力：这里要详述的是能力，所谓习惯，是指人们在几乎无意识的情况下做出的举动。一种行为的复杂程度越低，无论是体力上的还是脑力上的，被人们重复的可能性就越大。越简单的操作成本，记忆成本越低，越容易形成用户习惯。

举个例子，刷抖音就是用户行为成本极低的场景，你在刷抖音时，不需要多余的交互行为，切换视频甚至不需要点击，只需要向上滑动。除开抖音算法的精准推荐不说，从交互层面而言，也是足够简单并且形成习惯了。

如果改变会打破认知习惯，要让用户能快速了解新设计的使用方式。最好的方式是能够让用户快速与已其他竞品的操作习惯产生关联。比如采用其他主流应用成熟的交互方式。

如果改版会很大程度上改变用户行为，也可以考虑尝试以下的方式。

· 改版操作指引：这种方式较为常见，但是仍应注意避免繁琐的操作指引，切勿把操作指引当作体验差时的解决方案。

· 兼容多种用户习惯：这种方式可以让不同用户选择适合自己的交互方式，最大程度考虑到所有用户，但同时也可能造成了功能冗杂的情况。比如安卓底部三大金刚键，后面手机全面屏时代，新增了全面屏手势。考虑到安卓老用户的使用习惯，三大金刚键（底部虚拟按键）始终被保留下来；

· 允许切换新旧版本：这种方式一般是改版变化过大，用户一时间不容易接受新的体验方式，常见于网站，如站酷早期的大改版，但是仅适用于过渡期。

当然，除上述方式外，肯定还有一些其他让改变行为习惯更舒服的方式，这里不一一列举。

多变的酬赏

多变酬赏主要表现为：社交酬赏，猎物酬赏，自我酬赏。这几种酬赏会加强用户对产品的使用习惯。

社交酬赏：人们从产品中通过与他人的互动而获取的人际奖励，比如被认同、重视、喜爱等。比如人们喜欢发朋友圈、微博等，期望得到回馈，某种程度上都是为了获得社交酬赏。

猎物酬赏：人们从产品中获得的具体资源或信息。比如浏览信息流，丰富的信息流内容为用户提供了资讯，比如刷抖音，人们追求视频的新鲜感、追求内容的丰富性都是属于猎物酬赏。

自我酬赏：人们从产品中体验到的操控感、成就感和终结感。在目标驱动下，我们会去克服障碍，即便仅仅是因为这个过程能带来满足感。就像你玩游戏，希望赢过对面，或者期待将游戏玩通关，本质上属于自我酬赏。

投入

如果希望继续培养用户习惯，与产品产生更紧密的联系，就需要鼓励用户进行一些投入，以增加他们使用产品的可能性。行动只是用户使用的第一步，促使用户对产品的投入，才会真正增强用户与产品之间的联系，形成更强的用户习惯。但是如果用户自身没有投入，即替换成本低，那么随时都可能有被其他产品取代。

举个例子，移动互联网时期，微信早早入局，人们的关系链都在微信里面沉淀，即人们越使用微信，关系链沉淀越多，就越难以更换其他产品，所以两年前想要挑战微信的多闪、马桶 MT 和聊天宝这三款社交 App 不可避免的失败了。

用户越愿意投入，就证明用户粘性越高，在此过程中，用户习惯也会不断加强。

结语：

现阶段，人人大谈用户习惯，但是用户习惯不以自身为标准，而是需要考虑产品用户的行为特征，以及人们在使用产品时更加深层的、甚至用户本身都没有发现的习惯，这就需要设计师对习惯的产生、习惯的判断、习惯的培养有深入的认识。

一般情况下，产品不适合贸然改变用户习惯，但是在有特殊需要的情况下，还是不可避免的改变产品的用户使用习惯，当然我们需要如何让用户更加容易接受。大多数产品，都希望用户能够形成对自己产品的习惯，所以需要了解用户如何对产品产生习惯、加强习惯，使产品拥有更强的吸引力，但是良好、正向的用户习惯一定是基于用户体验的。

文章来源：站酷作者：热风_

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2716)

212021-4

JavaScript控制语句与异常处理

前端达人

文章目录

一、if 控制语句

简单if语句：

 if(条件表达式){ 表达式成立时执行的代码段 } 


    
        1
    

    
        2
    

    
        3

注意 : 除零值以外,其他值都为真

特殊写法 : { }可以省略,一旦省略，if语句只控制其后的第一行代码

var a = 10; if(a<5){ console.log('成立'); //如果if不成立则不运行 } if(a<5)console.log('成立'); //如果if不成立则不运行 console.log('测试'); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

if - else结构

if(条件表达式){ //条件成立时执行 }else{ //条件不成立时选择执行 


    
        1
    

    
        2
    

    
        3
    

    
        4

多重分支结构

if(条件1){ //条件1成立时执行 }else if(条件2){ //条件2成立时执行 }else if(条件3){ //条件3成立时执行 }...else{ //条件不成立时执行 } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

示例：

var bmi=23.5; if(bmi>23.5){ console.log('肥胖') }else if(bmi>=18.5){ console.log('正常') }else{ console.log('偏瘦') } //正常 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

二、switch 选择控制语句

语法：

switch(value){ case 值1 : //value与值1匹配全等时,执行的代码段 break; //结束匹配 case 值2 : //value与值2匹配全等时,执行的代码段 break; case 值3 : //value与值3匹配全等时,执行的代码段 break; default: //所有case匹配失败后默认执行的语句 break; } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

使用 :

switch语句用于值的匹配,case用于列出所有可能的值;只有switch()表达式的值与case的值匹配全等时,才会执行case对应的代码段
break用于结束匹配,不再向后执行;可以省略,break一旦省略,会从当前匹配到的case开始,向后执行所有的代码语句,直至结束或碰到break跳出
default用来表示所有case都匹配失败的情况,一般写在末尾,做默认操作
多个case共用代码段

case 值1:

case 值2:

case 值3:

以上任意一个值匹配全等都会执行的代码段

注：case表示一个条件，满足这个条件就会进入该内部，遇到break则会跳出，若未写break则直到遇到下一个break才会停止。

var gameScore = 'better'; switch(gameScore){ //case表示一个条件 满足这个条件就会走进来 遇到break跳出。如果某个条件中不写 break，那么直到该程序遇到下一个break停止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17

三、while 循环控制语句

语法：

定义循环变量; while(循环条件){ 条件满足时执行的代码段
   更新循环变量; } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

示例：

//循环变量 var i = 1; var sum=0; while(i<101){ //循环体 console.log(i); sum+=i; //更新循环变量 i++; } console.log(sum); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

四、do-while 循环

语法：

do{ 循环体; 更新循环变量 }while(循环条件); 


    
        1
    

    
        2
    

    
        3
    

    
        4

示例：

//循环输出一百次 var i = 101; do{ console.log('python'); //更新循环变量 i++; }while(i<101); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

do-while与while循环的区别：

while循环先判断循环条件,条件成立才执行循环体
do-while循环不管条件是否成立,先执行一次循环体

五、for 循环控制语句

语法：

for(定义循环变量;循环条件;更新循环变量){ 循环体; } 


    
        1
    

    
        2
    

    
        3

循环控制 :

break 强制结束循环
continue 结束当次循环,开始下一次循环

循环嵌套 : 在循环中嵌套添加其他循环

示例：

/*控制循环体的执行：break/continue*/ for(var i=1;i<10;i++){ console.log(i); if(i==5){ console.log('--------') //一旦执行break,循环体中后面的代码都不执行 break; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

注：循环的是获取的每一个DOM元素值，for...in...是用来循环对象的所有属性，DOM元素包括了输出的属性，因此不推荐使用for...in...

六、三元运算符

var a = 1 var b =2 var c = a>b ? a:b //如果a>b成立返回a，否则返回b console.log(c) 


    
        1
    

    
        2
    

    
        3
    

    
        4

七、异常处理

语法：

try{ 这段代码从上至下运行，其中任何一个语句抛出异常该代码块即结束运行。 }catch(e){ 如果try代码块中抛出异常，catch代码块中代码就会被执行；
    e为一个局部变量，用来指向Error对象或者其他抛出的对象。 }finally{ 无论try中代码是否有异常抛出（甚至是try代码块中有return语句）finally代码块中始终会被执行。 } 






    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

注：主动抛出异常：throw Error("xxx")

转自：csdn 论坛作者：PPPsych


    
        


    
    
        蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2415)

212021-4

我劝你学一下TypeScript（TypeScipt有这篇就够了）

前端达人

文章目录

TypeScript

TypeScript

一概述

1.1 基本介绍

以JavaSrcipt为基础构建的语言
一个JavaSrcipt的超集
可以再任何支持JavaSrcipt的平台运行
TypeScript扩展了JavaSrcipt，并添加了变量类型
TS不能被JS解析器中直接执行，需要通过编译转换为JS

1.2 安装TS编译器

安装

npm i -g typescript 


    
        1

验证

在这里插入图片描述

测试

先建hello.ts

console.log("你好啊，TS") 
        

            
                1

编译

tsc hello.ts 
        

            
                1

在这里插入图片描述

二基本语法

2.1 总体介绍

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。4

类型声明

类型声明是TS非常重要的一个特点；
通过类型声明可以指定TS中变量（参数、形参）的类型；
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；

语法：

let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
} 
                        

                            
                                1
                            

                            
                                2
                            

                            
                                3
                            

                            
                                4
                            

                            
                                5
                            

                            
                                6
                            

                            
                                7

变量：

//申明一个变量 let 变量名：类型
// number
let a:number;
a=1;
// string
let b:string;
b="哈哈";
// boolean
let c:boolean=false; 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

函数：

// 函数 function 函数名(变量:类型,变量:类型):返回值类型 {
//     return a+b;
// }
function sum(a:number,b:number):number {
    return a+b;
}
sum(1,3) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

2.2 基本数据类型

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘孙悟空’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

number

// number let a:number; a=1; 


    
        1
    

    
        2
    

    
        3

string

// string
let b:string;
b="哈哈"; 


    
        1
    

    
        2
    

    
        3

boolean

// boolean
let c:boolean=false; 


    
        1
    

    
        2

字面量

// 字面量 |：或 &：与
let d:'man'|'woman';
d="man";
d="woman";
let e:number|boolean;
e=1
e=false; 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

any

//any 一切类型变量与js没啥区别
let f:any;
f=1
f=false; 


    
        1
    

    
        2
    

    
        3
    

    
        4

unknown

// unknown 不知道什么类型，实际上是一种安全的any
let a:unknown;
a=1;
a=false;
a="哈哈哈"; 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

void

// 函数返回值,默认返回值any，空值
function add(a,b) {
return a+b;
}
// 没有返回值,空值
function adds():void {
return null;
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

never

// never:永远没有返回值
function hh():never {
throw new Error("错误了");
} 


    
        1
    

    
        2
    

    
        3
    

    
        4

object

// object 对象 常用：{属性：属性值}
let  b:{name:string,age:string,sex:boolean};
b={name:"小米",age:"12",sex:false}
// ?可选属性
let c:{name:string,age?:string,sex?:boolean}
c={name:"雷军"}
// 任意类型的属性 [propName:string]:any
let d:{name:string,[propName:string]:any}
d={name:"哈哈",a:1,b:2}
// 限制函数结构 语法：（形参：类型......）=>返回值
let e:(a:number,b:number)=>number;
e=function (n1,n2):number {
return n1+n2;
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

array

// 数组，同一类型的数组 类型[], array<类型>
let a:string[];
a=['h','b','c','d']
let b: Array<string>;
b=['h','b','c','d'] 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

tuple

// 元组：固定长度的数组
let c:[string,string,number]
c=["哈哈","哈哈",1] 


    
        1
    

    
        2
    

    
        3

enum

// 枚举
//性别枚举类
enum sex {
    male,
    female
}
let d:{name:string,sex:sex}
d={
    name:"李磊",
    sex:sex.male
}
alert(d.sex===sex.male) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

别名

//别名
type mytype=string;
let  e:mytype; 


    
        1
    

    
        2
    

    
        3

三编译选项

3.1 自动编译文件

如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译

3.2 具体配置

{ //指定需要TS编译的文件路径 /**:任意路径 /*：任意文件 "include": ["./编译选项/src/**/*"], //指定不需要TS编译的文件路径  /**:任意路径 /*：任意文件 ,默认路径： "exclude": ["./编译选项/test/**/*","./基本数据类型/**/*"], //继承:配置文件的重复引用 // "extends": "", //具体需要编译的文件 //"files": [], //编译器选项 "compilerOptions": { // target 指定被TS编译的ES版本 "target": "ES3", // module 模块化 "module": "system", // 指定项目需要的库 "lib": ["dom"], // 编译完后的js文件路径 "outDir": "./编译选项/js", // 将代码合并为一个文件 "outFile": "./代码/1.js", // 是否对js文件进行编译 "allowJs": true, // 检查js是否符合规范 "checkJs": false, // 是否移除注释 "removeComments": true, // 不生成编译后的文件 "noEmit": false, // 当有错误时不生编译文件 "noEmitOnError": true, // 是否是严格模式 "alwaysStrict": true, // 是否允许出现隐式的any "noImplicitAny": false, // 是否允许出现隐式的this "noImplicitThis": false, // 严格使用空值 "strictNullChecks": false } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41

其他配置：https://www.w3cschool.cn/typescript/typescript-compiler-options.html

四打包选项

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包；TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；

4.1 初始化项目

进入项目根目录，执行命令 npm init -y，创建package.json文件

4.2 下载构建工具

命令如下：

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin 


    
        1

共安装了7个包:

webpack：构建工具webpack
webpack-cli：webpack的命令行工具
webpack-dev-server：webpack的开发服务器
typescript：ts编译器
ts-loader：ts加载器，用于在webpack中编译ts文件
html-webpack-plugin：webpack中html插件，用来自动创建html文件
clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录

4.3 配置TS编译选项

根目录下创建tsconfig.json，配置可以根据自己需要

{ "compilerOptions": { "target": "ES2015", "module": "ES2015", "strict": true } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

4.4 修改package.json配置

修改package.json添加如下配置

{ ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack serve --open chrome.exe" }, ... } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

4.5 项目使用

在src下创建ts文件，并在并命令行执行npm run build对代码进行编译；

或者执行npm start来启动开发服务器；

4.6 Babel

除了webpack，开发中还经常需要结合babel来对代码进行转换；

以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中；

虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；

对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；

安装依赖包：

npm i -D @babel/core @babel/preset-env babel-loader core-js 


    
        1

共安装了4个包，分别是：

@babel/core：babel的核心工具
@babel/preset-env：babel的预定义环境
@babel-loader：babel在webpack中的加载器
core-js：core-js用来使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
... 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34

如此一来，使用ts编译后的文件将会再次被babel处理；使得代码可以在大部分浏览器中直接使用；同时可以在配置选项的targets中指定要兼容的浏览器版本；

总结

// 导入包 const path = require("path"); // 导入HTML插件 const HtmlWebpackPlugin = require("html-webpack-plugin"); // 导入清除插件 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //webpack打包配置文件 module.exports={ // 关闭代码压缩，可选 optimization:{ minimize: false }, //入口 entry: './src/index.ts', //指定打包文件所在目录 output: { //打包文件所在目录 path: path.resolve(__dirname,'dist'), //打包文件名 filename: "bundle.js", // 关闭webpack的箭头函数，可选 environment: { arrowFunction: false // 关闭webpack的箭头函数，可选 } }, //指定打包需要的模块 module: { //规则 rules: [ { // 指定规则生效的文件 test: /\.ts$/, // 要使用的loader加载器 use: [ // 加载器一 { loader: "babel-loader", // 选项 options:{ //预设 presets: [ [ //指定环境插件 "@babel/preset-env", { // 兼容的浏览器信息 "targets":{ "chrome": "58", "ie": "11" }, //  指定corejs版本 "corejs":"3", // 使用core的方法 usage:按需加载 "useBuiltIns": "usage" } ] ] } }, // 加载器二 { loader: "ts-loader", } ] , // 排除的模块 exclude: /node_modules/ } ] }, //配置Html插件 plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ //标题 //title: "小米" // 模板 template: "./src/index.html" }) ], // 用来设置引用模块 resolve: { // 以 js ts 结尾 extensions: ['.js','.ts'] } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58
    

    
        59
    

    
        60
    

    
        61
    

    
        62
    

    
        63
    

    
        64
    

    
        65
    

    
        66
    

    
        67
    

    
        68
    

    
        69
    

    
        70
    

    
        71
    

    
        72
    

    
        73
    

    
        74
    

    
        75
    

    
        76
    

    
        77
    

    
        78
    

    
        79
    

    
        80
    

    
        81
    

    
        82
    

    
        83
    

    
        84
    

    
        85
    

    
        86
    

    
        87
    

    
        88
    

    
        89
    

    
        90

五 OOP

要想面向对象，操作对象，首先便要拥有对象；

要创建对象，必须要先定义类，所谓的类可以理解为对象的模型；

程序中可以根据类创建指定类型的对象；

举例来说：

可以通过Person类来创建人的对象，通过Dog类创建狗的对象，不同的类可以用来创建不同的对象；

5.1 定义类

class 类名 {
    属性名: 类型;

    constructor(参数: 类型){
        this.属性名 = 参数;
    }

    方法名(){
        ....
    }

} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

示例：

 class Person{
        name: string;
        age: number;

        constructor(name: string, age: number){
            this.name = name;
            this.age = age;
        }

        sayHello(){
            console.log(`大家好，我是${this.name}`);
        }
    } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

使用类：

const p = new Person('孙悟空', 18);
p.sayHello(); 


    
        1
    

    
        2

5.2 构造函数

可以使用constructor定义一个构造器方法；

注1：在TS中只能有一个构造器方法！

例如：

class C{
    name: string;
    age: number

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

同时也可以直接将属性定义在构造函数中：

class C {
    constructor(public name: string, public age: number) {
    }
} 


    
        1
    

    
        2
    

    
        3
    

    
        4

上面两种定义方法是完全相同的！

注2：子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）！

例如：

class A {
    protected num: number;
    constructor(num: number) {
        this.num = num;
    }
}

class X extends A {
    protected name: string;
    constructor(num: number, name: string) {
        super(num);
        this.name = name;
    }
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

如果在X类中不调用super将会报错！

5.3 封装

对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

静态属性（static）：
- 声明为static的属性或方法不再属于实例，而是属于类的属性；
只读属性（readonly）：
- 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
TS中属性具有三种修饰符：
- public（默认值），可以在类、子类和对象中修改
- protected ，可以在类、子类中修改
- private ，可以在类中修改

示例：

public：

class Person{
    public name: string; // 写或什么都不写都是public
    public age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以在类中修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 可以通过对象修改 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23

protected：

class Person{ protected name: string; protected age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中可以修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 不能修改 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24

private：

class Person{ private name: string; private age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中不能修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 不能修改 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24

5.4 属性存取器

对于一些不希望被任意修改的属性，可以将其设置为private

直接将其设置为private将导致无法再通过对象修改其中的属性

我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器

读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

示例：

class Person{ private _name: string; constructor(name: string){ this._name = name; } get name(){ return this._name; } set name(name: string){ this._name = name; } } const p1 = new Person('孙悟空'); // 实际通过调用getter方法读取name属性 console.log(p1.name); // 实际通过调用setter方法修改name属性  p1.name = '猪八戒'; 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22

5.5 静态属性

静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用

静态属性（方法）使用static开头

示例：

class Tools{ static PI = 3.1415926; static sum(num1: number, num2: number){ return num1 + num2 } } console.log(Tools.PI); console.log(Tools.sum(123, 456)); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

5.6 this

在类中，使用this表示当前对象

5.7 继承

继承时面向对象中的又一个特性

通过继承可以将其他类中的属性和方法引入到当前类中

示例：

class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } } class Dog extends Animal{ bark(){ console.log(`${this.name}在汪汪叫！`); } } const dog = new Dog('旺财', 4); dog.bark(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19

通过继承可以在不修改类的情况下完成对类的扩展

5.8 重写

发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写

示例：

class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } run(){ console.log(`父类中的run方法！`); } } class Dog extends Animal{ bark(){ console.log(`${this.name}在汪汪叫！`); } run(){ console.log(`子类中的run方法，会重写父类中的run方法！`); } } const dog = new Dog('旺财', 4); dog.bark(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27

在子类中可以使用super来完成对父类的引用

5.9抽象类（abstract class）

抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例

abstract class Animal{ abstract run(): void; bark(){ console.log('动物在叫~'); } } class Dog extends Animals{ run(){ console.log('狗在跑~'); } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现;

5.10 接口

接口的作用类似于抽象类，不同点在于：接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法；

接口主要负责定义一个类的结构，接口可以去限制一个对象的接口：对象只有包含接口中定义的所有属性和方法时才能匹配接口；

同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性；

示例（检查对象类型）：

interface Person{ name: string; sayHello():void; } function fn(per: Person){ per.sayHello(); } fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}}); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

示例（实现）：

interface Person{ name: string; sayHello():void; } class Student implements Person{ constructor(public name: string) { } sayHello() { console.log('大家好，我是'+this.name); } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

5.11泛型

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定）；

此时泛型便能够发挥作用；

举个例子：

function test(arg: any): any{
    return arg;
} 


    
        1
    

    
        2
    

    
        3

上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的；

由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的：

首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型；

5.12 泛型函数

5.12.1 创建泛型函数

function test<T>(arg: T): T{
    return arg;
} 


    
        1
    

    
        2
    

    
        3

这里的``就是泛型；

T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型；

所以泛型其实很好理解，就表示某个类型；

那么如何使用上边的函数呢？

5.12.2 使用泛型函数

5.12.3 方式一（直接使用）：

test(10) 


    
        1

使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式

5.12.4 方式二（指定类型）：

test<number>(10) 


    
        1

也可以在函数后手动指定泛型；

5.12.5 函数中声明多个泛型

可以同时指定多个泛型，泛型间使用逗号隔开：

function test<T, K>(a: T, b: K): K{
  return b;
}

test<number, string>(10, "hello"); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

使用泛型时，完全可以将泛型当成是一个普通的类去使用；

2.12.6 泛型类

类中同样可以使用泛型：

class MyClass<T>{
  prop: T;

  constructor(prop: T){
      this.prop = prop;
  }
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

2.12.7 泛型继承

除此之外，也可以对泛型的范围进行约束

interface MyInter{
  length: number;
}

function test<T extends MyInter>(arg: T): number{
  return arg.length;
} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用；

转自：csdn 论坛作者：Eason~IT

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3202)

212021-4

如何通过推广增加网站流量

seo达人

　　做SEO的朋友都知道网站流量尤为重要，所以对于网站的推广也是非常重要的，网站推广可以增加网站流量是任何seo优化人员都应该考虑的问题，如何推广网站，让流量快速上升?下面就带大家来看一看。

如何通过推广增加网站流量

　　1、推广QQ群

　　QQ群是聚集大量行业相关员工的最佳场所，其成员比其他社区论坛活跃得多，你只需要成为群的一员，最好是成为群的管理员或一名群主，只有你有权发布你的内容。因此，QQ群推广应该知道如何处理人与人之间的关系，以及如何建立这样的关系。

　　可以通过定期交流行业知识或帮助团队成员回答问题来建立权威。

　　(1)QQ空间推广。首先你必须有大量的朋友，然后在空间里不断更新行业的技术文章或用户需求，然后你可以在这些文章中推荐你的网站。

　　(2)QQ邮件推广，发送的邮件必须是用户感兴趣和需要的内容，标题要有吸引力，内容要简洁，最终的结果是引导用户进入网站。

　　2、软文广告

　　你需要知道一些写作技巧，结合行业知识和营销知识，让用户在阅读你的文章时输入你的营销理念，引导用户浏览你的网站。

　　(1)购买软文，联系管理员在不同行业的网站上购买软文，购买的软文可以由他人书写，也可以自己书写，便于排名。

　　(2)A5、CHINAZ等网站的进行投稿，这样会有更多的人会看到并转载文章。

　　3、分类信息平台发布

　　到目前为止，大部分五金、办公、住宅、机械产品的购买者仍在到分类信息平台寻找销售商，更多的生产商和贸易商也在到分类信息平台发布产品信息。长尾字排名作为公司站长尾字排名很大程度上取决于上面的说法，这样的一方也能给主站带来一些流量和权重。

　　4、微博微信推广

　　微博和微信是粉丝的生态，所以推广微博和微信的前提是增加大量的朋友和行业相关人士，他们是为了好玩而分享，如果你的内容不是很搞笑，广告效果就不是很好。

　　美图、服装、旅游、食品、化妆品、互联网等行业适合在微博推广，机械、化工等行业则不适合。

作者：曦曦SEO来源：成都seo

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2215)

212021-4

如何优化软文本链的发布？

seo达人

要想快速提高网站的流量和优化效果，需要多方面的合作，其中外部环节不可忽视。外链分为多种形式，哪一种比较好，那么如何释放软文本的外链呢？现在让我们来看看。

1、软文外链释放技巧

所谓优化网站进行软文链发布，必须发布一些内容和网站本身比较大，关键词匹配的主题链接URL，搜索引擎近对用户体验度的要求越来越高，所以要注意网站内容与网站本身的相关性。

发布软链接要根据关键词写原创文章，这样的链接更有利于百度抓取，只有软链接地址收录网站本身带来的好处更多，所以本文包含的直接方法，就是发布原文。

在软文连锁发布中，要注意软文外链平台。如果我们要找的平台是垃圾链，不仅不能给网站带来流量，更有可能受到搜索引擎的惩罚，那么我们必须选择一个正规的平台。

2、软件链发布过程

通过一定的渠道找到合适的软发布平台，大致可以分为以下几种类型：软件论坛、站长论坛、贴吧、博客和高质软文本发布平台。要针对不同类型的网站选择不同的软件发布平台进行文章发布。

外链软文，必须写外链软文，那么外链软文标题应该写哪个方面比较好？我们可以根据长尾关键词来确定软文标题，SEO优化写这篇文章有点难度，当然，我们也可以从百度下拉框、相关竞争对手的网站、追逐工具中寻找用户需求，比如长尾词、时间、文章结构、编辑写用户需求自由度等，推广我们的网络品牌，用户需求自由。

当我们发布软文本链接时，首先要确保发布的外部链接的内容是搜索引擎的，并且文字要恰当。我们发布软文链是为了让搜索引擎快速收录，做给网站自身带来更快的好处。一般来说，一篇好文章就是副标题。字数由频道的性质决定。排字很好。在文章的前面加上你网站的品牌词，在文章底部加上一个链接。

文章来源：优帮云SEO

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3266)