一個(gè)Web程序員對錘子官網(wǎng)的吐槽

2020-12-28 10:48:16來源：強(qiáng)迫癥設(shè)計(jì)詩作者：Jason2be

你好。我是一名設(shè)計(jì)師，有點(diǎn)強(qiáng)迫癥，來信是為給錘子手機(jī)的官網(wǎng)提一些建議。和你之前在采訪中見過，那次我們跟你聊了將近十個(gè)產(chǎn)品的問題，你都堅(jiān)持聽完了，因此印象挺好。

老羅：

你好。我是一名設(shè)計(jì)師，有點(diǎn)強(qiáng)迫癥，來信是為給錘子手機(jī)的官網(wǎng)提一些建議。和你之前在采訪中見過，那次我們跟你聊了將近十個(gè)產(chǎn)品的問題，你都堅(jiān)持聽完了，因此印象挺好。

一、免責(zé)聲明

設(shè)計(jì)師的強(qiáng)迫癥導(dǎo)致我要求比較完美。下面的意見可能對于大多數(shù)人來說這并不是“問題”�，F(xiàn)在寫出來也是基于善意，如果你判斷后覺得有必要的話，不妨優(yōu)化改進(jìn)一下。不過因輕信和參考里面的信息而帶來了任何直接或間接損失則與本人無任何關(guān)系。如對此聲明有異議，則請停止閱讀來信。

二、使用環(huán)境

電腦硬件：MacBook Pro （Retina, 15-inch, Late 2013）
系統(tǒng)版本：OS X 10.10 （14A329f）［系統(tǒng)語言為中文］
瀏覽器：Safari 8.0（10600.1.8）
所有截圖均來自 8 月 31 日到 9 月 2 日期間

三、原則基準(zhǔn)

不管網(wǎng)站設(shè)計(jì)得怎么樣，首先所有內(nèi)容都必須符合中國的法律法規(guī)
對術(shù)語（包括翻譯）的使用準(zhǔn)確，避免產(chǎn)生歧義
對商標(biāo)（包括其英文商標(biāo)對應(yīng)的中文商標(biāo)）使用的準(zhǔn)確，避免損害第三方利益
審美可以有自己的取向，但需要自圓其說，且始終貫徹這一原則
選擇使用了真正符合自己品牌的設(shè)計(jì)
哪些方式可以優(yōu)于業(yè)界平均水準(zhǔn)

四、具體建議

［一］政策相關(guān)：

（一）備案號鏈接：

服務(wù)器在國內(nèi)的網(wǎng)站受工信部監(jiān)管，并受其頒布的《管理辦法》約束。根據(jù)《互聯(lián)網(wǎng)信息服務(wù)管理辦法》及《非經(jīng)營性互聯(lián)網(wǎng)信息服務(wù)備案管理辦法》的法律法規(guī)，要求網(wǎng)站必須在其主頁添加其備案號，且備案編號需要鏈接到信息產(chǎn)業(yè)部備案管理系統(tǒng)。

問題頁：

全站：http://www.smartisan.com （最底部）

錘子科技的網(wǎng)站底部提供了網(wǎng)站的備案號，但不可點(diǎn)擊，也就是說沒有鏈接工信部網(wǎng)站，這不符合法規(guī)，有可能會被處罰五千元以上一萬元以下罰款。

問題頁：

網(wǎng)址：

http://www.smartisan.com/#/video （Smartisan T1 宣傳視頻）

http://www.smartisan.com/#/videoDesigner （Smartisan T1 主設(shè)計(jì)師 – Robert Brunner）

及其源代碼

從源代碼中可以看到，該視頻存放在錘子自己的網(wǎng)站上并向網(wǎng)友提供觀看，這是不符合規(guī)定的。

相關(guān)法規(guī)如下：

《互聯(lián)網(wǎng)視聽節(jié)目服務(wù)管理規(guī)定》

第二十四條擅自從事互聯(lián)網(wǎng)視聽節(jié)目服務(wù)的，由縣級以上廣播電影電視主管部門予以警告、責(zé)令改正，可并處 3 萬元以下罰款；情節(jié)嚴(yán)重的，根據(jù)《廣播電視管理?xiàng)l例》第四十七條的規(guī)定予以處罰。

來源：中華人民共和國國家新聞出版廣電總局官網(wǎng)

http://www.sarft.gov.cn/articles/2007/12/29/20071229131521450172.html

建議：

移除放置在自己網(wǎng)站的視頻，采用提供類似《錘子發(fā)布會》那樣的跳轉(zhuǎn)到優(yōu)酷或?qū)?yōu)酷視頻集成到官網(wǎng)的做法來解決。

（以上對政策的理解為個(gè)人的意見）

［二］中文標(biāo)點(diǎn)的使用規(guī)范：

1、問題頁：

全站：http://www.smartisan.com/#/overview（第二部分）

“前所未有的左右手操作習(xí)慣全支持…這一切，全都來自”中的“…”是什么？我想它試圖表示“省略號”的意思，但這并不符合現(xiàn)行的《標(biāo)點(diǎn)符號用法》國家標(biāo)準(zhǔn)。

國家標(biāo)準(zhǔn)：

《標(biāo)點(diǎn)符號用法》

4. 1 省略號

4. 11.1 定義

標(biāo)點(diǎn)的一種，標(biāo)示語段中某些內(nèi)容的省略及意義的斷續(xù)等。

4. 11.2 形式

省略號的形式是“……”

來源：《中華人民共和國國家標(biāo)準(zhǔn)——標(biāo)點(diǎn)符號用法》

GB/T 15834 – 2011

建議：

中文的省略號源自英文的 ellipsis，原為三點(diǎn)，但由于直排時(shí)易于冒號混淆，才改為六點(diǎn)，并占兩個(gè)字寬。

“…”不僅沒有出現(xiàn)過在我們的語文書上，還與常出現(xiàn)在數(shù)學(xué)書上的“…”（Mid-line ellipsis，同為三個(gè)點(diǎn)的字符，部分瀏覽器可能無法正常顯示）容易產(chǎn)生混淆。

或許這樣更美觀，為避免“重新發(fā)明”中文符號的尷尬，建議修改省略號為“……”或其他符號。

2、問題頁：

http://www.smartisan.com/#/detail（技術(shù)規(guī)格：音頻播放、視頻播放部分，以及幾乎相同的訂購頁面）

頁面中“支持聲音文件格式：MP3, M4A, AAC, MKA, AMR”及以下類似文本的“逗號”都是半寬的英文逗號（COMMA，Unicode 為 U+002C），如果要用“逗號”則應(yīng)該使用的是全寬的中文逗號（FULLWIDTH COMMA，Unicode 為 U+FF0C）。但此處應(yīng)該使用的其實(shí)是“頓號”，因?yàn)楹竺娓母袷狡潢P(guān)系是并列，且根據(jù)可讀性和語意要求，它們之間的停頓應(yīng)該較短。

國家標(biāo)準(zhǔn)：

4. 5 頓號

4. 5.1 定義

句內(nèi)點(diǎn)號的一種，表示語段中并列詞語之間或某些序次語之后的停頓。

4. 5.3 基本用法

4. 5.3.1 用于并列詞語之間。

示例1：這里有自由、民主、平等、開放的風(fēng)氣和氛圍。

示例2：造型科學(xué)、技藝精湛、氣韻生動，是盛唐石雕的特色。

附錄 B

B.1.1 逗號、頓號表示并列詞語之間停頓的區(qū)別

逗號和頓號都表示停頓，但逗號表示的停頓長，頓號表示的停頓短。并列詞語之間的停頓一般用頓號，但當(dāng)并列詞語較長或其后有語氣詞時(shí)，為了表示稍長一點(diǎn)的停頓，也可用逗號。

來源：《中華人民共和國國家標(biāo)準(zhǔn)——標(biāo)點(diǎn)符號用法》

GB/T 15834 – 2011

建議：

將類似文本的半角逗號，改成全角逗號。

［三］相關(guān)術(shù)語的使用準(zhǔn)確：

問題頁：

http://www.smartisan.com/#/os（相機(jī)部分）

“相機(jī)還內(nèi)置了 180°~360° 全景拍攝”中的“全景”（Panorama）表述有誤。低于 360° 的廣角圖并不能被稱為“全景”。該詞來自希臘語的“all sight”，專指視角涵蓋了 360° 的畫面，而 180°~ 359°之間照片，只能被稱為“寬景”。

相關(guān)引用：

寬景

是指畫面比普通的廣角的水平視角大，卻又未涵蓋到整個(gè)周圍 360°。

全景
源自于傳統(tǒng)平面的概念，水平視角包含完整一周 360°，但受限于二度空間，無法完整呈現(xiàn)出置身于球體，或是立方體內(nèi)部的那種三維的立體空間之視覺效果，謂之為全景。

來源：維基百科

http://zh.wikipedia.org/wiki/全景圖

建議：

修改文案為“相機(jī)還內(nèi)置了寬景與全景拍攝、二維碼識別等功能。”

［四］英文縮寫的正確書寫

問題頁：

http://www.smartisan.com/#/os（錄音機(jī)部分）

“支持錄制 wav 格式，多種音質(zhì)的音頻”中的“wav”三個(gè)字母應(yīng)該全部大寫。當(dāng)“wav”小寫時(shí)，通常是在“被忽略大小寫”的情景下，也就是做“擴(kuò)展名”時(shí)，通常寫作“.wav”。

相關(guān)引用：

WAV（Waveform Audio Format），是微軟與 IBM 公司所開發(fā)的一種聲音編碼格式，在 Windows 平臺的應(yīng)用軟件受到廣泛的支援。由于此音頻格式未經(jīng)過壓縮，所以在音質(zhì)方面不會出現(xiàn)失真的情況……

來源：維基百科

http://zh.wikipedia.org/wiki/WAV

建議：

將這處字母大寫，使其與“技術(shù)規(guī)格”頁面的正確書寫保持一致。

［五］商標(biāo)的正確使用

問題頁：

http://www.smartisan.com/#/overview（第一部分）

“以至于你很難相信它是一部基于安卓系統(tǒng)的智能手機(jī)”其中的“安卓”應(yīng)該指的是 Android 系統(tǒng)。遺憾的是，谷歌并沒有成功將“安卓”兩字申請為自己操作系統(tǒng)的名字，它的正式的中文商標(biāo)是“安致”。

相關(guān)查詢：

在國家工商總局，搜索“谷歌公司”�？梢园l(fā)現(xiàn) Google 其實(shí)確實(shí)注冊了“Android”（英文）、“安卓”和“安致”等商標(biāo)。

但遺憾是“安卓”的“商品/服務(wù)列表”，都離我們真正想表達(dá)的“Android”系統(tǒng)相去甚遠(yuǎn)。

而“安致”商標(biāo)則更接近我們理解的“Android”系統(tǒng)。

查詢地址：國家工商總局——商標(biāo)查詢

http://www.saic.gov.cn/ywbl/zxcx/sbcx/

建議：

因?yàn)?Android 商標(biāo)還在谷歌手中，而“安致”商標(biāo)公眾又不夠熟悉，因而建議將文字換成“你很難相信它是一部基于 Android 系統(tǒng)的智能手機(jī)”。

［六］字體選擇（帶有主觀性，僅供參考）

1、設(shè)計(jì)字體選擇

標(biāo)題字體

錘子官網(wǎng)多數(shù)宣傳圖的字體使用的是方正蘭亭系列，其中大標(biāo)題是超細(xì)黑，副標(biāo)題是纖黑。這并不是一個(gè)“問題”，不過雖然蘭亭系列可以算是國內(nèi)數(shù)一數(shù)二的中文字體，但絕大數(shù)的中文字體提供的西文都差強(qiáng)人意。

問題頁：

http://www.smartisan.com/#/detail（第一部分）

下圖所舉“i”就是一個(gè)非常糟糕的設(shè)計(jì)。

它讓人感覺這個(gè)“i”是帶有拼音的聲調(diào)，而是錘子官方的 logo 卻正好是一個(gè)連豎線上的那個(gè)“點(diǎn)”都省略的設(shè)計(jì)。

而“，”的設(shè)計(jì)真的詮釋了什么叫“屌絲（字面意思）”。

建議：

使用一款字體其實(shí)未必就一定要使用該字體的全套字符，有足夠字體排�。═ypography）經(jīng)驗(yàn)的設(shè)計(jì)師，通常會讓中文使用中文字體，而西文采用與中文字體搭配和諧的西文字體來配合，至于原設(shè)計(jì)中太難看的標(biāo)點(diǎn)符號則可以用其他合理的標(biāo)點(diǎn)符號替代或者重新設(shè)計(jì)一個(gè)。

文字標(biāo)識（Logotype）

如果西文部分決定了蘭亭系列，那么就需要看網(wǎng)站是否“貫徹”了這一決定。遺憾的是呈現(xiàn)在我們眼前的設(shè)計(jì)并不是這樣的。下面截取了網(wǎng)站上提到“smartisan”的地方。

問題頁：

http://www.smartisan.com （全站）

注：截圖部分的實(shí)現(xiàn)方式都是圖片，換句話說，不管用戶電腦里都是否安裝了設(shè)計(jì)中使用的字體，錘子只要想，都可以輕松做到讓它們呈現(xiàn)出統(tǒng)一的設(shè)計(jì)感。

以上設(shè)計(jì)中，除了有錘子自己設(shè)計(jì)的 Logo 字體以后，大部分的西文采用了蘭亭系統(tǒng)的西文，因?yàn)榇旨?xì)不同視覺上稍有不同以外。我們還看到了錘子自制 logo 字體、微軟雅黑（西文部分）和 DIN Next Ultra Light （目測）。導(dǎo)致的問題就是 Smartisan 的 “i” 頭上，一會兒沒點(diǎn)、一會兒有一個(gè)圓形的點(diǎn)、一會兒有方形的點(diǎn)、一會兒有一個(gè)像捺的點(diǎn)，實(shí)在欠專業(yè)。

相關(guān)鏈接：

來源：Fonts: DIN Next Ultra Light

http://www.fonts.com/font/linotype/din-next/ultra-light

建議：

Smartisan 自制 Logotype 看起來是參考了 FF Signa 之后的設(shè)計(jì)，不過個(gè)人覺得其間距（spacing）和字距（kerning）并不是很理想，但盡管如此這并不妨礙錘子在整個(gè)網(wǎng)站“貫徹”此字體設(shè)計(jì)，制作一套屬于自己的 Logo 字體然后用于網(wǎng)站上是非常常見的做法。

我們也可以同時(shí)看到，上面的“smartisan os”字樣使用了 DIN Next Ultra Light。這是一款由 Akira Kobayashi 設(shè)計(jì)的出色字體，不僅能有較細(xì)的筆劃，跟錘子整個(gè)網(wǎng)站審美取向相同，也能與 Logo 字體達(dá)到一定程度的和諧。作為一款需要支付購買的商業(yè)字體，錘子既然在這里用了它，我假設(shè)就是已經(jīng)進(jìn)行了購買，那么只在這一處使用不僅“浪費(fèi)”，也缺少將設(shè)計(jì)精神貫徹的魄力。

不到萬不得已的時(shí)候都不應(yīng)該使用微軟雅黑或者蘭亭系列的西文（包括數(shù)字、標(biāo)點(diǎn)部分）。而且就算要用，也至少堅(jiān)持要么用蘭亭系列要么用雅黑系列的西文，統(tǒng)一很重要。

2、正文字體選擇

這里說的“正文字體”指的是，通過代碼指定的“字體列表”，它們在用戶瀏覽器中顯示的效果與用戶使用的系統(tǒng)、瀏覽器、是否安裝得有對應(yīng)字體甚至操作系統(tǒng)及瀏覽器的語言都有關(guān)系。因?yàn)檫@些諸多原因，制作網(wǎng)頁的前端工程師，通常會在代碼里通過一個(gè)叫做“font-family”的屬性來執(zhí)行瀏覽器優(yōu)先顯示的字體。

font-family: “字體1″，“字體2″，“字體3″，“字體4″，“字體5″，“字體6″，某一類字體的類型;

以上“代碼”在瀏覽器渲染網(wǎng)頁時(shí)，工作原理是這樣的：

如果用戶設(shè)備里安裝（包括預(yù)裝和自行購買）了的“字體1”，則以“字體1”顯示文字，否則開始判斷“字體2”的情況；如果“字體2”有安裝，則正確顯示，否則就繼續(xù)向后匹配到已安裝字體才用對應(yīng)字體來顯示它，如果所列字體都沒有安裝則按照最后準(zhǔn)則“某一類字體的類型”（如廣義上的“黑體”，是黑體就可以）來顯示。

問題頁：

http://www.smartisan.com/#/os （除第一部分的大部分）

“Smartisan OS 的桌面再現(xiàn)了經(jīng)典的九宮/十六宮格設(shè)計(jì)”這段文字的“字體列表”是這樣的：

font-family: 方正蘭亭黑,STHeiti,華文黑體，”Microsoft YaHei”，微軟雅黑,STHei,華文黑體，”Helvetica Neue”,Helvetica,sans-serif;

源代碼雖然是用戶不會看到的東西，但它卻影響了所有用戶最終的顯示效果，錘子官網(wǎng)的這段代碼其“業(yè)余”程度讓人震驚。

具體的問題如下：

（1）使用了中文來作為字體的名稱：

這可能會導(dǎo)致非常多的非中文系統(tǒng)和非中文瀏覽器沒法正確查找到對應(yīng)的字體

（2）使用了字體的“顯示名稱”而非“字體名稱”來書寫：

“方正蘭亭黑”是字體在用戶電腦上顯示的名稱，如果希望瀏覽器準(zhǔn)確對應(yīng)到該字體的話，對應(yīng)的字體名應(yīng)該是“FZLanTingHei-R-GBK”。

（3）使用了大部分人電腦里沒有安裝的字體作為最優(yōu)先字體來顯示：

“方正蘭亭黑”是一款付費(fèi)字體， Windows 系統(tǒng)的電腦并沒有預(yù)裝這款字體，全中國恐怕也就只有幾個(gè)設(shè)計(jì)公司的電腦最終能看到“你們最想傳達(dá)的視覺設(shè)計(jì)”。

而雖然蘋果 OS X 系統(tǒng)預(yù)裝了“方正蘭亭黑”，但其在電腦里面的名字叫“蘭亭黑-簡”，而字體名稱叫“Lantinghei SC”。寫“方正蘭亭黑”根本無法使它工作，也就是說錘子第一順位的字體居然是對所有人都冗余的無用代碼。

（4）使用了實(shí)際上相同的字體來占領(lǐng)字體順位：

列表中“STHeiti”和“華文黑體”是同一個(gè)字體，而且“華文黑體”的中文還出現(xiàn)了兩次。而“Microsoft YaHei”和“微軟雅黑”也是相同的字體，這樣的寫法簡直讓人懷疑錘子的前端工程師是否了解“font-family”的工作原理。

（5）使用了錯(cuò)誤的字體名稱：

在“微軟雅黑”和“華文黑體”中間有一個(gè)字體叫“STHei”，不存在這樣一款字體。

（6）將中文字體的優(yōu)先級放在了西文字體之前：

中文字體設(shè)計(jì)得有西文字符，而西文字體沒有設(shè)計(jì)中文字符，將中文字體的優(yōu)先級放在西文字體的前面，網(wǎng)頁中的西文就都是中文字體中的設(shè)計(jì)了，這幾乎失去了后面再設(shè)計(jì)西文字體的意義。

（7）所列字體列表對跨平臺顯示的情況考慮不足：

因?yàn)?Windows 、Linux 和大部分 Android 等系統(tǒng)上沒有預(yù)裝“Helvetica Neue”和“Helvetica”，而列表中并沒有提供第二順位的西文，最終在所列設(shè)備上的顯示效果會隨著系統(tǒng)和瀏覽器的設(shè)定，變得千奇百怪。

建議：

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 的方法修正由此帶來的西文標(biāo)點(diǎn)問題，此處省略。

［七］網(wǎng)頁 Bug

一個(gè)要急死處女座的網(wǎng)頁 Bug

問題頁：

http://www.smartisan.com/#/design

“技術(shù)規(guī)格”與“優(yōu)先購買通道”之間的垂直分割線，隨著頁面滾動，一會兒變長一會兒變短，而且當(dāng)是白色背景時(shí)，它的中心還不是跟文字處于同一水平線。

建議：

統(tǒng)一該分割線的長度和位置。

［八］Retina 屏適配

想要在 Retina 屏幕上還能保持清晰，就需要上傳圖片的長寬是普通屏幕所需的 2 倍才行，這些圖片通常在文件名后面會以 @2x 的方式結(jié)尾。

錘子的官網(wǎng)為大部分宣傳圖片都提供了 @2x 的圖片，可惜不是所有。我想如果錘子本意是讓使用 Retina 屏的人能獲得更佳的瀏覽體驗(yàn)的話，那理所應(yīng)當(dāng)將全站都做到兼容。

問題頁：

http://www.smartisan.com （全站有很多，我只說首頁的情況）

首頁 Hero 圖下面的這三個(gè)櫥窗中提供的圖片未支持 Retina、“在線咨詢”背景圖未支持 Retina、網(wǎng)站備案信息（采用圖片提供的）也未支持 Retina。

這種情況還出現(xiàn)在“公司簡介”、“加入我們”等系列頭圖上配的文字等。我覺得這顯然不是能力的問題，而是沒有規(guī)范的需求管理系統(tǒng)，同時(shí)公司內(nèi)部的工作流（Wokrflow）還存在問題的結(jié)果。

好了，就是這些。我上面說的肯定不能保證全對，謹(jǐn)慎參考吧。

***

另，好朋友知道我在寫這封郵件的時(shí)候，他第一反應(yīng)是“你為什么也要黑老羅？”他甚至沒有看過內(nèi)容，就先從我的“動機(jī)”開始懷疑起來了。

說說我的動機(jī)，我開了一個(gè)微信公眾帳號，名字就叫“強(qiáng)迫癥設(shè)計(jì)詩”，想吸點(diǎn)粉絲，所以將這封原本準(zhǔn)備私下發(fā)給你的郵件最終變成了“公開信”。寫作的目的不是“黑”錘子，這只是系列文章的第一篇。

還想看到這類文章的朋友，不妨掃描下面的二維碼，關(guān)注一下吧，微信號是 OCDesigner。

關(guān)鍵詞：Web程序員錘子網(wǎng)站

一個(gè)Web程序員對錘子官網(wǎng)的吐槽

問題頁：

相關(guān)法規(guī)如下：

問題頁：

1、問題頁：

2、問題頁：

問題頁：

問題頁：

問題頁：

問題頁：

問題頁：

問題頁：

問題頁：

相關(guān)閱讀:

1、問題頁：

2、問題頁：