香港APP设计风格竞品分析
香港 风格 竞品分析
【为什么要分析香港本土APP】
2.0規範現狀
從進入公司到現在有一年多的時間，在原基礎上，提煉鳳凰的核心視覺語言，在原來的基礎上發展並建立了2.0版本的設計規範-黑粗風格，全面改版鳳凰秀APP頁面，整體質感有一個大的提升。
站到現在，回頭看看，發現鳳凰秀目前產品功能更偏向適用於內地用戶，而UI樣式更偏向海外風格，產品整體的風格和設計語言的提煉不清晰，品牌界定不明確，需要進一步大膽的發展和探索。
再大的發展都離不開本心，想起我們的產品口號“立足香港，面向海外全球。”希望我們能穩穩的站立在香港的腳下，向全世界發揮更大的影響力。
引發下面的核心問題：
Q：作為香港本土的APP的風格到底應該是什麼？
以上就是我們分析香港本土APP的原因，想找到香港APP的設計基因，領會香港設計風格的精髓。
【競品分析】
1、如何選擇競品
為了能夠廣泛而全面的探索香港本土設計語言，我們分別從縱向和橫向來篩選不同屬性的APP做參考分析。
分為三類：
A:香港01、VIU、VIUtv、奈飛、mytvsuper——香港本地用戶量最大的新聞媒體資訊類APP。
B：八達通——在香港人手一張八達通，該APP評分超高，用戶吞吐量大，無疑是香港最常用的APP。從橫向分析八達通APP背後，香港的設計風格是如何體現的。
C:支付寶HK——對照支付寶內地和香港版本的設計樣式區別，可以給到我們很大的啟發——他們在面對香港版本的時候，設計上到底改變了什麼？為什麼改變？
2、香港設計背景板
在進行競品分析之前，先來感受感受香港整體的大背景，任何脫離環境的分析都是沒有說服力的。
說到香港，自然會想起香港經濟繁榮發展，亞洲四小龍之一，在香港寸土寸金，在陸地面積1105平方公里上擠著七百多萬人口。香港人口密度為全世界第4.香港在高人口密度的同事，仍然保留大量未開發的郊野土地。如果只計算已開發土地，香港人口密度為每平方公里接近3萬人。
快速發展的商業氣息，寸土寸金的居住面積，與鱗次櫛比的高樓引起強烈反差的是狹窄的街道，快速行走在上班路上的人們，香港的特色十分的鮮明。
關於香港設計風格的資料尋找
3、競品分析
了解了香港大環境之後，會對香港APP的理解更加深入透徹，也更能夠幫助把握香港設計風格的精髓。
l 香港01
香港01頁面截圖
香港01規範梳理
作為香港NO.1的新聞資訊APP，它的風格代表了典型的香港主流资讯媒体类APP設計風格。
a、字体
字体整体较小，以2pt大小为差别匀速下降，因为文字涉及到行 高，这样的字体系统更便于在有限空间内高效率排布信息，即空间 紧凑但也有条不紊。
字重：最重是中黑（香港APP通用）——在字体大小和繁体的限制 下，要有强调效果但不能太粗不便于识别。
常规最常用；细体出现在文章的局部，大片段落出现的时候，为减 少用户视觉疲劳可用细体。
字色：比国内字色稍微深一点——因为字体比较细且小的情况下，需要加深颜色来起到更好的识别效果。
b、颜色
吸取了香港01里面的图标及色块用色，颜色普遍为高饱和度高明度的区域色块，整体比较有冲击力，更容易吸引人的点击欲望。
c、排版
香港01的主要内容以资讯卡片为主，排版模仿youtube的大圖Feed流風格，一維式的佈局，減少用戶的視覺干擾。两边边距仅为8pt，为了最大限度的展示内容，留白非常紧张。
在页面层次感上，层层递进的感觉非常明显，在视觉比重上，素材图片无疑是最重的，接下来才是标题和id。素材图片里的文字和外面的标题文字大小的悬殊对比，将用户的目光牢牢锁定在图片以及视频内，沉浸感强。
香港01的排版让人感受到他们在尽最大的努力把内容最先呈现到用户眼前。
d、设计风格
卡片+重投影
相对来说，香港本土APP比较常用卡片投影的方式来区分内容，且都会使用较重的投影以及比较小的模糊半径。
还是因为空间的紧凑，为了有效节约空间，减小留白，投影通过加深颜色，缩小半径来达到分层以及节省空间的目的。
减少留白，排版布局紧凑。
线/线框的应用也多了起来。用来区分局部的线和线框，甚至功能性图标也多为线性，且比较细，加上颜色深，给人一种精致的视觉感受。
l Viu
viu截图
类似奈飞的设计风格，Viu采用深色系背景上展示精致好看的素材图片来吸引用户的眼球，达到聚焦注意力的效果。
viu规范梳理
a、字体
viu的字体比香港01的更小，一级标题更像是平面设计用字体，不具有代表性。产品功能不同，viu主要是电视剧等娱乐节目的内容，主要通过图片来吸引用户注意，且没有资讯类功能。
深色背景下加上较小的字，同样是把图片推到用户眼前。
viu字体运用的一个特色是，用了品牌色作为模块标题以及导航选中效果的体现，有助于向用户传达产品品牌概念，具有独特的识别性。
b、颜色
viu的用色上比较常用品牌色，在品牌色的基础上添加粉色作为辅助色，两者在色感上都比较明艳，在深色背景对比下稍显扎眼，略微有种荧光色的感觉，不能看太久。
c、排版
利用栅格工具，一维式布局，嵌套横滑大中组件，组件的高度保持基本一致的高度，非常平稳的架构布局。
d、设计风格
深色背景下直角卡片平铺，干净利落的排版没有一丝干扰，将重点聚焦在精美的产品图片上，好像有在电影院看电影的感觉。
但是这种设计风格比较受素材图片质量的影响，因此更适用于纯电影、电视剧等产品。
5、Viu和Viutv的对比
背景一黑一白：暗黑聚焦于图片，白色聚焦于文字，和整个环境。从viu到viutv，图片在页面中占的视觉比重下降了，文字承担了更多的引导识别功能。
字体：viutv有一个26大小的标题字体，也正如我之前所说的，增加一个差别较大的字体，空间感就跟着上来了。viutv的字体承担了区别不同模块的功能，标题有一定重量；另外，文字的层级差别较大，对比强烈，突出重点。
空间感：viutv的更有呼吸感，间距也更大。
素材图：viutv的素材图质量更差一些，这也是产品内容决定的，它的产品更多元丰富，从纪录片动漫到综艺访谈等，内容的性质导致它不能像viu一样做到精细质量的图片把关，所以文字要在图片旨意不清晰的时候，起到提示的作用。
直角与圆角的区别：viu直角，viutv圆角：在感性上对应的是：viu更专一，viutv更丰富多样和大气。
l 八达通
作为手握香港最多用户的本土APP，八达通是绕不过的存在。
通过观察八达通，我发现并不是所有香港的APP的排版都很挤的，当然这跟产品不同有关。作为新闻资讯类APP，目标就是如何在有限的碎片时间里塞给用户最多的信息，并想尽方法挽留用户，达到更长时间阅读时间，提高转化率；
八达通在香港的地位不可撼动，由于它强大的功能，除了最基本的支付、交通等，还可以被当做学生证、小区门禁卡、图书馆借书证等。
八达通APP用来代替实体卡，在各种场合下使用，所以用户最想要的就是，快速便捷的找到目标，即用即走。
a、字体
标题字体整体比其他阅读资讯类的大了一 个层级，且是按照4pt层级跳跃。
八达通是工具类型的APP，重点是做好区 分，让用户能够最快的找到目标并顺畅使 用——留白在这里变成了必不可少的东西
更好识别+用户点击区域保证。留白一多，
空间就大，字体的发挥空间大了，可以稍
微跳一下。
字色：和香港01比，又轻了一些，和内地的
差不多。我理解的是它想通过鲜艳的图标颜
色来做出区别？图标下的文字有些几乎看不
太清，用户更可能通过位置记忆和图标来筛
选和寻找目标所在位置。
b、颜色
数据颜色整体非常鲜亮，相比于香港01的高饱和高明度，这里的颜色明度更高，饱和度稍微低一点，颜色更偏向年轻，轻快的感觉。
c、排版
八达通的排版非常简单，竖排列表流布局或者宫格式布局，留白大，空间感足。要考虑它的使用场景，用户一般在户外，拿出手机，打开八达通，快速寻找到“九巴月票”，点击使用，越快越好，因为赶时间。所以页面层次不能太多，要让用户很快就找到，需提炼将较常用的放在险要的位置，做好区分。
【总结共性以及应用于新平台】
我理解的香港的风格，并不是多么奇怪，或者就单单说丑。一切的结果都是有原因的，在香港这个特别的背景环境下，人们也习惯并适应了在异常拥挤的信息中快速提取自己的目标，高效率是香港的标配，所以香港APP给我综合的感觉是，拥抱复杂的同时，保持着高效。这表明我们在做的时候，更加考验排版对比，在有限的空间中，如何抓到重点。
总结共性
字体普遍小、细、层级差别不大，颜色深，细体精致
字体整体观感如下：空间挤，留白间距小。虽然字体是繁体字，却没有影响阅读，虽然要求在有限的空间尽最大力量呈现信息，确也可以做到井井有条，乱中有序。最常用常规，最粗到中黑，细体选择性使用。因为繁体中文笔画多，字体要小，所以普通大小的字体都相对要细一点更好识别。
颜色鲜艳、高饱和高明度，吸睛。
留白少，没有呼吸，信息量集中，阅读沉浸且高效（针对媒体类app）
因为空间有限，而内容无限。
常用卡片+较重投影，较小模糊半径，起到有限空间里分层的作用
内地更倾向于轻投影+大模糊半径，但香港版本更类似于谷歌设计风格中比较明显的投影。这样的选择，在有限空间里明确分层是最合适的。这样一屏页面就可以放下更多内容。
但整体感觉是，内容信息爆炸下内容的呈现还是比较顺畅的，复杂而精致排版的风格，是香港的特色。
应用于新平台
不同产品又有各自独特的部分，如果我们要做媒体视频类APP，viu和viutv的风格更具象。要考虑图片和文字的对比，具体情况具体分析。
