給老羅的一封公開信：關于錘子官網的微吐槽
老羅：
你好。我是一名設計師，有點強迫癥，來信是為給錘子手機的官網提一些建議。
和你之前在采訪中見過，那次我們跟你聊了將近十個產品的問題，你都堅持聽完了，因此印象挺好。
一、免責聲明
設計師的強迫癥導致我要求比較完美。下面的意見可能對于大多數人來說這并不是“問題”。現在寫出來也是基于善意，如果你判斷后覺得有必要的話，不妨優化改進一下。不過因輕信和參考里面的信息而帶來了任何直接或間接損失則與本人無任何關系。如對此聲明有異議，則請停止閱讀來信。
二、使用環境
電腦硬件：MacBook Pro (Retina, 15-inch, Late 2013)
系統版本：OS X 10.10 (14A329f) ［系統語言為中文］
瀏覽器：Safari 8.0(10600.1.8)
所有截圖均來自 8 月 31 日到 9 月 2 日期間
三、原則基準
不管網站設計得怎么樣，首先所有內容都必須符合中國的法律法規
對術語（包括翻譯）的使用準確，避免產生歧義
對商標（包括其英文商標對應的中文商標）使用的準確，避免損害第三方利益
審美可以有自己的取向，但需要自圓其說，且始終貫徹這一原則
選擇使用了真正符合自己品牌的設計
哪些方式可以優于業界平均水準
四、具體建議
［一］政策相關：
（一）備案號鏈接：
服務器在國內的網站受工信部監管，并受其頒布的《管理辦法》約束。根據《互聯網信息服務管理辦法》及《非經營性互聯網信息服務備案管理辦法》的法律法規，要求網站必須在其主頁添加其備案號，且備案編號需要鏈接到信息產業部備案管理系統。
問題頁：
全站：http://www.smartisan.com （最底部）
錘子科技的網站底部提供了網站的備案號，但不可點擊，也就是說沒有鏈接工信部網站，這不符合法規，有可能會被處罰五千元以上一萬元以下罰款。
相關法規如下：
1）《互聯網信息服務管理辦法》
第二十二條 違反本辦法的規定，未在其網站主頁上標明其經營許可證編號或者備案編號的，由省、自治區、直轄市電信管理機構責令改正，處 5000 元以上 5 萬元以下的罰款。
來源：中國政府網
http://www.gov.cn/gongbao/content/2011/content_1860864.htm
2）《非經營性互聯網信息服務備案管理辦法》
第二十五條 違反本辦法第十三條的規定，未在其備案編號下方鏈接信息產業部備案管理系統網址的，或未將備案電子驗證標識放置在其網站指定目錄下的，由住所所在地省通信管理局責令改正，并處五千元以上一萬元以下罰款。
來源：中華人民共和國工業和信息化部官網
http://www.miit.gov.cn/n11293472/n11294912/n11296542/12095560.html
建議：
將備案信息修改為文字，并及時鏈接至工信部網站。
（二）視頻播放相關
制作、編輯、集成并通過互聯網向公眾提供視音頻節目被稱為“互聯網視聽節目服務”，受國家新聞出版廣電總局監管，并受其頒布的《管理規定》約束。按規定錘子如果要自己提供視頻地址在自己服務器的視頻播放的話，則需要取得廣播電影電視主管部門頒發的《信息網絡傳播視聽節目許可證》并備案，否則可能會被主管部門警告并處 3 萬元以下罰款。
問題頁：
網址：
http://www.smartisan.com/#/video （Smartisan T1 宣傳視頻）
http://www.smartisan.com/#/videoDesigner （Smartisan T1 主設計師 - Robert Brunner）
及其源代碼
從源代碼中可以看到，該視頻存放在錘子自己的網站上并向網友提供觀看，這是不符合規定的。
相關法規如下：
《互聯網視聽節目服務管理規定》
第二十四條 擅自從事互聯網視聽節目服務的，由縣級以上廣播電影電視主管部門予以警告、責令改正，可并處3萬元以下罰款；情節嚴重的，根據《廣播電視管理條例》第四十七條的規定予以處罰。
來源：中華人民共和國國家新聞出版廣電總局官網
http://www.sarft.gov.cn/articles/2007/12/29/20071229131521450172.html
建議：
移除放置在自己網站的視頻，采用提供類似《錘子發布會》那樣的跳轉到優酷或將優酷視頻集成到官網的做法來解決。
（以上對政策的理解為個人的意見）
［二］中文標點的使用規范：
1、問題頁：
全站：http://www.smartisan.com/#/overview（第二部分）
“前所未有的左右手操作習慣全支持…這一切，全都來自”中的“…”是什么？我想它試圖表示“省略號”的意思，但這并不符合現行的《標點符號用法》國家標準。
國家標準：
《標點符號用法》
4.1 省略號
4.11.1 定義
標點的一種，標示語段中某些內容的省略及意義的斷續等。
4.11.2 形式
省略號的形式是“……”
來源：《中國人民共和國國家標準——標點符號用法》
GB/T 15834 - 2011
建議：
中文的省略號源自英文的 ellipsis，原為三點，但由于直排時易于冒號混淆，才改為六點，并占兩個字寬。
“…”不僅沒有出現過在我們的語文書上，還與常出現在數學書上的“⋯”（Mid-line ellipsis，同為三個點的字符，部分瀏覽器可能無法正常顯示）容易產生混淆。
或許這樣更美觀，為避免“重新發明”中文符號的尷尬，建議修改省略號為“……”或其他符號。
2、問題頁：
http://www.smartisan.com/#/detail（技術規格：音頻播放、視頻播放部分，以及幾乎相同的訂購頁面）
頁面中“支持聲音文件格式：MP3, M4A, AAC, MKA, AMR”及以下類似文本的“逗號”都是半寬的英文逗號（COMMA，Unicode 為 U+002C），如果要用“逗號”則應該使用的是全寬的中文逗號（FULLWIDTH COMMA，Unicode 為 U+FF0C）。但此處應該使用的其實是“頓號”，因為后面跟的格式其關系是并列，且根據可讀性和語意要求，它們之間的停頓應該較短。
國家標準：
4.5 頓號
4.5.1 定義
句內點號的一種，表示語段中并列詞語之間或某些序次語之后的停頓。
4.5.3 基本用法
4.5.3.1 用于并列詞語之間。
示例1：這里有自由、民主、平等、開放的風氣和氛圍。
示例2：造型科學、技藝精湛、氣韻生動，是盛唐石雕的特色。
附錄 B
B.1.1 逗號、頓號表示并列詞語之間停頓的區別
逗號和頓號都表示停頓，但逗號表示的停頓長，頓號表示的停頓短。并列詞語之間的停頓一般用頓號，但當并列詞語較長或其后有語氣詞時，為了表示稍長一點的停頓，也可用逗號。
來源：《中國人民共和國國家標準——標點符號用法》
GB/T 15834 - 2011
建議：
將類似文本的半角逗號，改成全角逗號。
［三］相關術語的使用準確：
問題頁：
http://www.smartisan.com/#/os（相機部分）
“相機還內置了 180°~360° 全景拍攝”中的“全景”（Panorama）表述有誤。低于 360° 的廣角圖并不能被稱為“全景”。該詞來自希臘語的“all sight”，專指視角涵蓋了 360° 的畫面，而 180°~ 359°之間照片，只能被稱為“寬景”。
相關引用：
寬景
是指畫面比普通的廣角的水平視角大，卻又未涵蓋到整個周圍360°。
全景
源自于傳統平面的概念，水平視角包含完整一周360°，但受限于二度空間，無法完整呈現出置身于球體，或是立方體內部的那種三維的立體空間之視覺效果，謂之為全景。
來源：維基百科
http://zh.wikipedia.org/wiki/全景圖
建議：
修改文案為“相機還內置了寬景與全景拍攝、二維碼識別等功能。”
#p#
［四］英文縮寫的正確書寫
問題頁：
http://www.smartisan.com/#/os（錄音機部分）
“支持錄制 wav 格式，多種音質的音頻”中的“wav”三個字母應該全部大寫。當“wav”小寫時，通常是在“被忽略大小寫”的情景下，也就是做“擴展名”時，通常寫作“.wav”。
相關引用：
WAV（Waveform Audio Format），是微軟與IBM公司所開發的一種聲音編碼格式，在Windows平臺的應用軟件受到廣泛的支援。由于此音頻格式未經過壓縮，所以在音質方面不會出現失真的情況……
來源：維基百科
http://zh.wikipedia.org/wiki/WAV
建議：
將這處字母大寫，使其與“技術規格”頁面的正確書寫保持一致。
［五］商標的正確使用
問題頁：
http://www.smartisan.com/#/overview（第一部分）
“以至于你很難相信它是一部基于安卓系統的智能手機”其中的“安卓”應該指的是 Android 系統。遺憾的是，谷歌并沒有成功將“安卓”兩字申請為自己操作系統的名字，它的正式的中文商標是“安致”。
相關查詢：
在國家工商總局，搜索“谷歌公司”。可以發現 Google 其實確實注冊了“Android”（英文）、“安卓”和“安致”等商標。
但遺憾是“安卓”的“商品/服務列表”，都離我們真正想表達的“Android”系統相去甚遠。
而“安致”商標則更接近我們理解的“Android”系統。
查詢地址：國家工商總局——商標查詢
http://www.saic.gov.cn/ywbl/zxcx/sbcx/
建議：
因為 Android 商標還在谷歌手中，而“安致”商標公眾又不夠熟悉，因而建議將文字換成“你很難相信它是一部基于 Android 系統的智能手機”。
#p#
［六］字體選擇（帶有主觀性，僅供參考）
1、設計字體選擇
標題字體
錘子官網多數宣傳圖的字體使用的是方正蘭亭系列，其中大標題是超細黑，副標題是纖黑。這并不是一個“問題”，不過雖然蘭亭系列可以算是國內數一數二的中文字體，但絕大數的中文字體提供的西文都差強人意。
問題頁：
http://www.smartisan.com/#/detail（第一部分）
下圖所舉“i”就是一個非常糟糕的設計。
它讓人感覺這個“i”是帶有拼音的聲調，而是錘子官方的 logo 卻正好是一個連豎線上的那個“點”都省略的設計。
而“，”的設計真的詮釋了什么叫“屌絲（字面意思）”。
建議：
使用一款字體其實未必就一定要使用該字體的全套字符，有足夠字體排印（Typography）經驗的設計師，通常會讓中文使用中文字體，而西文采用與中文字體搭配和諧的西文字體來配合，至于原設計中太難看的標點符號則可以用其他合理的標點符號替代或者重新設計一個。
文字標識（Logotype）
如果西文部分決定了蘭亭系列，那么就需要看網站是否“貫徹”了這一決定。遺憾的是呈現在我們眼前的設計并不是這樣的。下面截取了網站上提到“smartisan”的地方。
問題頁：
http://www.smartisan.com （全站）
注：截圖部分的實現方式都是圖片，換句話說，不管用戶電腦里都是否安裝了設計中使用的字體，錘子只要想，都可以輕松做到讓它們呈現出統一的設計感。
以上設計中，除了有錘子自己設計的 Logo 字體以后，大部分的西文采用了蘭亭系統的西文，因為粗細不同視覺上稍有不同以外。我們還看到了錘子自制 logo 字體、微軟雅黑（西文部分）和 DIN Next Ultra Light （目測）。導致的問題就是 Smartisan 的 “i” 頭上，一會兒沒點、一會兒有一個圓形的點、一會兒有方形的點、一會兒有一個像捺的點，實在欠專業。
相關鏈接：
來源：Fonts: DIN Next Ultra Light
http://www.fonts.com/font/linotype/din-next/ultra-light
建議：
Smartisan 自制 Logotype 看起來是參考了 FF Signa 之后的設計，不過個人覺得其間距（spacing） 和字距（kerning）并不是很理想，但盡管如此這并不妨礙錘子在整個網站“貫徹”此字體設計，制作一套屬于自己的 Logo 字體然后用于網站上是非常常見的做法。
我們也可以同時看到，上面的“smartisan os”字樣使用了 DIN Next Ultra Light。這是一款由 Akira Kobayashi 設計的出色字體，不僅能有較細的筆劃，跟錘子整個網站審美取向相同，也能與 Logo 字體達到一定程度的和諧。作為一款需要支付購買的商業字體，錘子既然在這里用了它，我假設就是已經進行了購買，那么只在這一處使用不僅“浪費”，也缺少將設計精神貫徹的魄力。
不到萬不得已的時候都不應該使用微軟雅黑或者蘭亭系列的西文（包括數字、標點部分）。而且就算要用，也至少堅持要么用蘭亭系列要么用雅黑系列的西文，統一很重要。
2、正文字體選擇
這里說的“正文字體”指的是，通過代碼指定的“字體列表”，它們在用戶瀏覽器中顯示的效果與用戶使用的系統、瀏覽器、是否安裝得有對應字體甚至操作系統及瀏覽器的語言都有關系。因為這些諸多原因，制作網頁的前端工程師，通常會在代碼里通過一個叫做“font-family”的屬性來執行瀏覽器優先顯示的字體。
font-family: “字體1",“字體2",“字體3",“字體4",“字體5",“字體6", 某一類字體的類型;
以上“代碼”在瀏覽器渲染網頁時，工作原理是這樣的：
如果用戶設備里安裝（包括預裝和自行購買）了的“字體1”，則以“字體1”顯示文字，否則開始判斷“字體2”的情況；如果“字體2”有安裝，則正確顯示，否則就繼續向后匹配到已安裝字體才用對應字體來顯示它，如果所列字體都沒有安裝則按照最后準則“某一類字體的類型”（如廣義上的“黑體”，是黑體就可以）來顯示。
問題頁：
http://www.smartisan.com/#/os （除第一部分的大部分）
“Smartisan OS 的桌面再現了經典的九宮/十六宮格設計”這段文字的“字體列表”是這樣的：
font-family: 方正蘭亭黑,STHeiti,華文黑體,"Microsoft YaHei",微軟雅黑,STHei,華文黑體,"Helvetica Neue",Helvetica,sans-serif;
源代碼雖然是用戶不會看到的東西，但它卻影響了所有用戶最終的顯示效果，錘子官網的這段代碼其“業余”程度讓人震驚。
具體的問題如下：
（1）使用了中文來作為字體的名稱：
這可能會導致非常多的非中文系統和非中文瀏覽器沒法正確查找到對應的字體
（2）使用了字體的“顯示名稱”而非“字體名稱”來書寫：
“方正蘭亭黑”是字體在用戶電腦上顯示的名稱，如果希望瀏覽器準確對應到該字體的話，對應的字體名應該是“FZLanTingHei-R-GBK”。
（3）使用了大部分人電腦里沒有安裝的字體作為最優先字體來顯示：
“方正蘭亭黑”是一款付費字體， Windows 系統的電腦并沒有預裝這款字體，全中國恐怕也就只有幾個設計公司的電腦最終能看到“你們最想傳達的視覺設計”。
而雖然蘋果 OS X 系統預裝了“方正蘭亭黑”，但其在電腦里面的名字叫“蘭亭黑-簡”，而字體名稱叫“Lantinghei SC”。寫“方正蘭亭黑”根本無法使它工作，也就是說錘子第一順位的字體居然是對所有人都冗余的無用代碼。
（4）使用了實際上相同的字體來占領字體順位：
列表中“STHeiti”和“華文黑體”是同一個字體，而且“華文黑體”的中文還出現了兩次。而“Microsoft YaHei”和“微軟雅黑”也是相同的字體，這樣的寫法簡直讓人懷疑錘子的前端工程師是否了解“font-family”的工作原理。
（5）使用了錯誤的字體名稱：
在“微軟雅黑”和“華文黑體”中間有一個字體叫“STHei”，不存在這樣一款字體。
（6）將中文字體的優先級放在了西文字體之前：
中文字體設計得有西文字符，而西文字體沒有設計中文字符，將中文字體的優先級放在西文字體的前面，網頁中的西文就都是中文字體中的設計了，這幾乎失去了后面再設計西文字體的意義。
（7）所列字體列表對跨平臺顯示的情況考慮不足：
因為 Windows 、Linux 和大部分 Android 等系統上沒有預裝“Helvetica Neue”和“Helvetica”，而列表中并沒有提供第二順位的西文，最終在所列設備上的顯示效果會隨著系統和瀏覽器的設定，變得千奇百怪。
建議：
font-family: "DIN Next Ultra Light","Helvetica Neue",Helvetica, Arial,"Lantinghei SC","Hiragino Sans GB",STHeiti, "Noto Sans S Chinese", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei",sans-serif; font-weight:300;
然后可用 Unicode Range 的方法修正由此帶來的西文標點問題，此處省略。
［七］網頁 Bug
一個要急死處女座的網頁 Bug
問題頁：
http://www.smartisan.com/#/design
“技術規格”與“優先購買通道”之間的垂直分割線，隨著頁面滾動，一會兒變長一會兒變短，而且當是白色背景時，它的中心還不是跟文字處于同一水平線。
建議：
統一該分割線的長度和位置。
［八］Retina 屏適配
想要在 Retina 屏幕上還能保持清晰，就需要上傳圖片的長寬是普通屏幕所需的 2 倍才行，這些圖片通常在文件名后面會以 @2x 的方式結尾。
錘子的官網為大部分宣傳圖片都提供了 @2x 的圖片，可惜不是所有。我想如果錘子本意是讓使用 Retina 屏的人能獲得更佳的瀏覽體驗的話，那理所應當將全站都做到兼容。
問題頁：
http://www.smartisan.com （全站有很多，我只說首頁的情況）
首頁 Hero 圖下面的這三個櫥窗中提供的圖片未支持 Retina、“在線咨詢”背景圖未支持 Retina、網站備案信息（采用圖片提供的）也未支持 Retina。
這種情況還出現在“公司簡介”、“加入我們”等系列頭圖上配的文字等。我覺得這顯然不是能力的問題，而是沒有規范的需求管理系統，同時公司內部的工作流（Wokrflow）還存在問題的結果。
好了，就是這些。我上面說的肯定不能保證全對，謹慎參考吧。
原文鏈接：強迫癥設計詩
