給李楠的公開信!一個設計師關于魅族官網的吐槽

李楠:

你好。我是一名設計師,有點強迫癥,來信是為給魅族官網提一些建議。
和你之前在公開的活動上見過,當時對你幻燈片中的一個數字提出了質疑,隨即你現場修改了該數字,因此印象不錯。

給李楠的公開信!一個設計師關于魅族官網的吐槽
先稍微吐槽一下發布會吧,

上篇吐槽錘子官網的文章很火啊,還沒看到的同學們右戳,評論很有看點:《給老羅的公開信!一個設計師關于錘子官網的吐槽》
給李楠的公開信!一個設計師關于魅族官網的吐槽

一、疏密有序

白總的演講,相較之前明顯有提高。但令人印象深刻的卻是三次演講中白總走到臺旁去喝水的時候,雖然現場觀眾都表示出了涵養和耐心,還不斷鼓掌。

但這種情況的的確確讓演講效果大打折扣。既然是你看蘋果發布會,對 Craig 的演講都能吐槽(在《IT 公論》上),那至少可以安排疏密有序的幻燈片節奏,比如適時提供視頻,讓演講人有更多機會休息喝水。

二、細節

魅族 MX4 新增加了一個叫「閱讀」的 App,通過編輯精選一個內容呈現用戶,里面羅列的 Logo 是合作的媒體。隨便一看就會發現「Pingwest」出現了兩次,卻還是老版的 Logo。

給李楠的公開信!一個設計師關于魅族官網的吐槽

三、是否真的「忘記參數」

魅族是最早提出「忘記參數」的公司,但是現場幻燈片卻出現了大量的參數,坐在我旁邊的是一名不怎么懂技術的女生,我簡直可以從她是歡呼或鼓掌,還是平淡冷靜來判斷,大屏幕上出現的到底有沒有任何一個專業術語。

參數未必可怕,可怕是堆砌一大堆英文參數和數值提高的背后,沒把意味著能做的「事情」表達清楚。

——————————————————————具體建議——————————————————————

「盤古之白」

關于中西文混排時,中西文字符之間是否需要添加空格的問題,目前國家和出版界都沒有明確的規范,只有大家各自基于習慣的選擇。

不過整體來說,專業人士還是覺得有「空白間隙」比較好的,據說漢學家稱這個空白間隙為「盤古之白」,因為它劈開了全角字和半角字之間的混沌。所以專業的文字處理工具 InDesign 和 Word 都會在自動在中西文之間添加一個 1/4 的全角空格的寬度。

而在網站上通常沒有那么智能,大家會采用手動控制的方式來進行處理,包括蘋果中國、微軟、谷歌等都是手動在這樣的字符中間添加一個半角空格。

從魅族官網整體看,魅族似乎也希望采用手動控制的方式來處理文本,遺憾的是,它好像沒有成為整個設計部門的共識,最終呈現的效果千奇百怪。下面是我截取的部分圖片。

問題頁: http://www.meizu.com/products/mx4fun.html(MX4 及其他同級頁面)

給李楠的公開信!一個設計師關于魅族官網的吐槽

第一張圖的「2GB 雙通道 LPDDR3 內存,」和第二張圖的「配合更加聰明節能的 CPU,」逗號前都添加了多余的空格。

而第一幅圖中的「四核 600MHz」和「速度 6Gbps」的中西文字符之間應該添加半角空格,卻又沒見添加。

同時,「索尼/三星電芯的 3100 mAh 電池」處,數字和符號單位之間不該添加空格的地方卻又添加了。

給李楠的公開信!一個設計師關于魅族官網的吐槽

「Flyme 注重大屏體驗優化,讓大屏更為好用,Flyme4 給用戶高效的大屏交互體驗」簡單一段文字中空格的添加原則就不一致。

建議: 類似問題還有很多,我沒有一一截圖。希望魅族能夠統一標準,要么堅持都加上否則請都去掉。

數學符號及單位的表示

問題頁: http://www.meizu.com/products/mx4fun.html(顯示屏部分)

給李楠的公開信!一個設計師關于魅族官網的吐槽

「對比率達到了 1100:1」中的「:」錯誤的使用了全寬的冒號,它是表示比例的數學符號,顯然不會是全寬的。

參考: http://zh.wikipedia.org/wiki/比例

建議: 修改為半寬的冒號。

同樣這張圖片中,「這塊 5.36 吋屏幕」采用了「吋」,作為 inches 的翻譯,而在下圖中,則采用了「英寸」。

給李楠的公開信!一個設計師關于魅族官網的吐槽

事實上,這兩個寫法當然都可以,代表的意思相同,但卻帶來了讀音的不確定。因為「吋」字是復音漢字,也就是說它可以念作「yīngcùn」或者「cùn」。

參考: 《漢英雙解新華字典》,2000 年,ISBN 7-80103-198-9/H?58

下圖中的「500cd/㎡」的顯示效果,明顯沒有上圖的「500cd/m2」美觀。前者使用了一個特殊字符讓「m」和「2」被壓縮到一個半寬的寬度,識別困難,而后者則通過添加了一個表示「平方」的「2」來輔助顯示,更易識別。

建議: 酌情考慮,將所有「吋」替換為「英寸」,為表達的確切性和形式的統一。 酌情考慮,將所有「㎡」替換為「m2」,為美觀和形式的統一。

術語的分類錯誤

問題頁: http://www.meizu.com/products/mx4spec.html(導航定位部分)

給李楠的公開信!一個設計師關于魅族官網的吐槽

圖中,英文術語和中文術語各占一行,雖然保證了美觀,但卻帶來了尷尬的分類錯誤。

美國的「GPS」(全球定位系統)、俄羅斯的「GLONASS」(全球導航衛星系統)、日本的「QZSS」(準天頂衛星系統)和中國的「北斗導航」系統,同屬于「衛星導航系統」。

而「A-GPS」(輔助全球衛星定位系統)和「電子羅盤」(又譯做:「數字指南針/電子指南針」),一個是輔助導航技術,一個導航工具(元件);無論怎么劃分都不應該是現在的排列法。

建議: 修改為「GPS、GLONASS、QZSS、北斗導航」為一行,「A-GPS」和「電子羅盤」一行,或其他合適文案。

術語的理解錯誤

問題頁: http://www.meizu.com/products/mx4fun.html

給李楠的公開信!一個設計師關于魅族官網的吐槽

「高清 4K 視頻拍攝,可以 30 幀每秒碼率拍攝」中的「碼率」概念系誤用。「碼率」也就是「比特率」。

參考: 在電信和計算領域,比特率(Bit rate,變量 Rbit)是單位時間內傳輸送或處理的比特的數量。 在數字多媒體領域,比特率是單位時間播放連續的媒體如壓縮后的音頻或視頻的比特數量。

來源:維基百科 http://zh.wikipedia.org/wiki/比特率

這個意思就是,只有當視頻牽扯到網絡傳輸時,才會涉及到「碼率」,而且這個概念表示的是,每秒所需傳輸處理的比特數量。而文案中的意思是想表達「30 幀每秒」的幀數,這不是「碼率」而是「制式」。

現在世界上的主流的彩色電視廣播標準,也就是「制式」,分為兩種,一個是 PAL(Phase Alternating Line)制,一個是 NTSC(National Television System Committee)制。

參考: 「PAL」有時亦被用來指 625 線,每秒 25 格,隔行掃描,PAL 色彩調頻的電視制式(576i)。它與 525 線,每秒 29.97 格,隔行掃描的 NTSC 制式(480i)不同,在市售的 DVD 一般都會標示 NTSC 或 PAL 制。

來源:維基百科 http://zh.wikipedia.org/wiki/PAL 制式

簡單的說,每秒 25 幀就是 PAL 制,而 29.97(通常被認定為 30)幀每秒的就是 NTSC 制,它們和「碼率」并沒有直接關系。

建議: 修改文案為:「每秒為你記錄高達 30 幀的畫面,同時 H.265 編碼還可使優質的視頻體積更小」(隨手把不明所以的「H.265」優化了一下)

文案的翻譯

問題頁: http://www.meizu.com/en/products/mx4fun.html

給李楠的公開信!一個設計師關于魅族官網的吐槽

魅族的英文網站,使用了一個「2070W pixels」的表達,這顯然是沿用中文網站的文案「2070 萬有效像素」的翻譯,可惜的是「2070W」的表達恐怕沒有一個老外能夠看得懂。

建議: 所幸英文站上的大部分地方都采用了「20.7 megapixels」的正確譯法,建議修改一致。

網頁適配寬度的「安全框」

瀏覽設備的分辨率千差萬別,但我想我使用的 2880 x 1800 以及非 Retina 屏對應的 1440 x 900 應該不算邊緣。

問題頁: http://www.meizu.com/products/flyme4.0.html

給李楠的公開信!一個設計師關于魅族官網的吐槽

在我的分辨率下左側「lover」就這么變成了「over」,「女友」就這樣莫名其妙就成了「前女友」。而在更小分辨率的屏幕,這位美女就已經變成路人(英文徹底看不見)。

建議: 這張圖片明顯還有余地向右邊移動一些。 設定一個網頁的最小兼容寬度為「安全框」,保證主要內容在安全框內的都能被集中顯示。

第三方商標的合理使用

問題頁: http://www.meizu.com/en/products/mx4spec.htmlhttp://www.meizu.com/products/mx4spec.html

給李楠的公開信!一個設計師關于魅族官網的吐槽

商標的合理使用包括了在已注冊商標上標記 ? 和 ?。英文網站上,僅對「Corning」和「Gorilla」商標有標記,而包括「SONY」和「Sharp」等商標均熟視無睹。

而中文網站部分這種情況更差。

建議: 根據第三方商標注冊情況,合理標注 ? 和 ?,或頁面底部統一對相關商標進行聲明。

英文字體選擇

在昨天寫給老羅的公開信中,我有吐槽將中文字體的順位放在英文之前的不良后果。它會導致,頁面中的英文也會采用中文字體的西文設計,而大部分中文字體的西文設計都不敢恭維。

但這對中英文混排的網站來說,未必一定是「問題」。因為業界其實也有人不在乎,堅持全站都這么寫也算是統一。

但讓人費解的是,魅族的英文網站也采用了跟中文站一樣的 font-family 指定。

問題頁: http://www.meizu.com/en/products/mx4fun.html

給李楠的公開信!一個設計師關于魅族官網的吐槽

font-family:"微軟雅黑","Microsoft Yahei",Arial,Helvetica,sans-serif,"宋體";

這「字體列表」的寫法讓人震驚,魅族的網頁設計師對英文字體可謂全無造詣。而在「類字體」之后再添加一個「宋體」的做法也是讓人瞠目結舌。

建議: 從 font-family 中去掉「微軟雅黑」(中英文)以及后面的「宋體」。(親,這是英文網站)

基于 Flyme 4 系統的英文部分采用的是 Roboto 字體,Google 其實有提供對應 Web Font 解決方案,如果能和操作系統保持高度統一性,則再好不過。

比較廣告嫌疑

問題頁: http://www.meizu.com/products/mx4tech.html

給李楠的公開信!一個設計師關于魅族官網的吐槽

雖然「比較廣告」在全世界都無傷大雅,但在中國并不合法。這里使用的「iPhone」是蘋果公司的注冊商標,魅族沒有獲得該商標的使用許可,其文案表達也不免有通過程度的不同,對 iPhone 商標進行了貶低,如果被認定為侵權則可能面臨罰款甚至起訴。

建議: 去掉 iPhone,修改文案。

(以上所有法律問題,均是我個人解讀,酌情咨詢相關人士)

免責聲明

設計師的強迫癥導致我要求比較完美。下面的意見可能對于大多數人來說這并不是「問題」。現在寫出來也是基于善意,如果你判斷后覺得有必要的話,不妨優化改進一下。不過因輕信和參考里面的信息而帶來了任何直接或間接損失則與本人無任何關系。如對此聲明有異議,則請停止閱讀來信。

使用環境

電腦硬件:MacBook Pro (Retina, 15-inch, Late 2013) 系統版本:OS X 10.10 (14A343f) [系統語言為中文] 瀏覽器:Safari 8.0(10600.1.15) 所有截圖均來自 9 月 3 日 外接顯示屏:DELL U2413 顯示器

原則基準

不管網站設計得怎么樣,首先所有內容都必須符合中國的法律法規;對術語(包括翻譯)的使用準確,避免產生歧義;對商標(包括其英文商標對應的中文商標)使用的準確,避免損害第三方利益;審美可以有自己的取向,但需要自圓其說,且始終貫徹這一原則 選擇使用了真正符合自己品牌的設計;哪些方式可以優于業界平均。

我說的肯定不會全對,謹慎參考吧。

感謝各位關注我微信公眾賬號:“強迫癥設計詩”,ID 是 OCDesigner。

昨天發表的《給老羅的一封公開信——關于錘子官網的微吐槽》,獲得了 @錘子科技 的感謝和 @羅永浩 的關注。

給李楠的公開信!一個設計師關于魅族官網的吐槽

我希望我這系列的文章之后還能保持這樣良好的互動,“公開信”系列還會繼續,如果你第一次知道這個賬號,不妨掃描下方二維碼關注我吧。

給李楠的公開信!一個設計師關于魅族官網的吐槽

設計師吐槽文也有合集!

來自對岸設計師同胞的吐槽!
《中國臺灣設計師吐槽:我們的UI到底怎么了?》

與“幫個忙”同列人氣榜第一名的經典問題!
《甲方最經典問題!“做一個網站多少錢?”》

放棄吐槽,立地轉行,或者...加油!
《推薦:給迷茫的設計師們——撥開設計的疑云》

作者:強迫癥設計詩
uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量77萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

給李楠的公開信!一個設計師關于魅族官網的吐槽

收藏
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。