當前位置:
首頁 > 最新 > 「小紅點」內藏大玄機

「小紅點」內藏大玄機

自1992年推出第一款產品,ThinkPad系列筆記本至今已經走過了26個年頭。ThinkPad憑藉其堅固、可靠的特性在業界享有很高聲譽,甚至在筆記本電腦發展史中佔據重要地位,成為商務筆記本的代名詞。而ThinkPad除了經典黑色外殼設計之外,還有一個非常鮮明的標識讓人印象深刻,那就是小紅點(Trackpoint)。

1992年,第一台以ThinkPad命名的筆記本電腦ThinkPad 700C誕生於日本大和實驗室。黑色經典外殼設計來源於松花堂便當盒。

小紅點作為ThinkPad的標誌性設計可追溯到上世紀80年代末。作為移動辦公用品定位的筆記本電腦並未如今天一樣擁有觸控板,而是靠滑鼠操作,而現實往往並不具備在打開筆記本的同時,還能讓滑鼠自由移動的大面積空間,這讓「完美移動辦公」成為空談。

2001年,《美國計算機協會學報》在紀念PC誕生20周年的一篇報道中寫出「1985年,東芝推出T1000,第一次給人們帶來了『筆記本電腦』的概念。

為解決這個問題,不少筆記本電腦製造商都曾為此做出不懈努力,最終, IBM的人體工程學實驗室Almaden Research創始人兼主任Ted Selker博士使用一個等軸晶組裝置小觸桿,用它來感受壓力,並將這個觸桿放置於鍵盤 G、H、B 三個按鍵中間,這一想法在ThinkPad產品項目組多方努力之下成為現實,並應用在1992年上市的第一台ThinkPad700C上。

這就是1992年上市的700C

那麼「小紅點」的外形為什麼如此設計?這其中又有什麼奧秘所在?

首先從尺寸來說,「小紅點」之所以不是「大紅點」,主要是和與觸控交互有關。很多觸控目標的設計基於人們的手指平均寬度來制定,當觸控目標為一個按鈕時,在達到某個臨界點之前按鈕越大越好用,但是超過這一尺寸後,按鈕面積的增大對於提高觸控交互準確性的提升就變得非常有限了,並且如果按鍵過大,會破壞鍵盤設計的整體和諧感,突兀到用戶會懷疑他是否可被掌控。

而使用過「小紅點」的用戶都知道,小紅點的尺寸恰好可以適應於各類不同的手指寬度,且設計在鍵盤正中間內陷區域,並不是一個凸起的存在,更直接讓正在打字的雙手直接滑動到小紅點進行操作。

為了使交互更加精準靈敏,獲得更大的觸控目標,並不需要將「小紅點」做的很大,只需要增加他的觸控熱區大小就可以了,這也是他頂部粗糙的原因,這些觸摸起來粗糙的觸控點使得小紅點更易被感知。

那麼為什麼要設計成圓形而不是方形呢?這就需要談到和人體工程學相關的知識了。工具使用方式需要盡量符合人體自然形態,簡而言之,一個符合人體工學的產品,是不需要人主動去適應操作的,而是產品去配合人的使用習慣。而人的手指是柔軟可隨觸控點擊而相應變形的,但不變的是,手指與物體接觸的形狀始終接近於圓,因此圓形是一種最為適應手指接觸面積狀態的形狀。

從此圖可見一斑,點擊時,接觸面積總是呈現近圓形。如果手很小就更用力按,無論如何總能覆蓋到全部按鍵。這一點是其他形狀做不到的。

而圓的受力面積較之其他的圖形會更為均勻,能夠更好的隨手指的移動而移動。圓沒有什麼方向之分,因此用戶可以實現360°對「小紅點」進行控制移動,輕易可觸及形狀邊際線。而其他形狀則會顯得有稜有角,無法觸及形狀邊際線,顯得笨拙。同時,圓也更容易在鍵盤中形成焦點,視覺上給人帶來的攻擊性較低,易於接受。

小紅點結構圖

如果說圓形是為了更和諧,那麼選擇紅色則是為了更突出。紅色,在色彩學中是一種飽和度和純度最高的顏色之一,作為一種激情飽滿的暖色調,他能大膽引爆色彩和視覺能量,這個特點,在整體全部以黑色基調為主的ThinkPad之下顯得更為突出。紅色具有焦點作用,再一次加深了「小紅點」的存在感。這樣,用戶一眼就能發現這個按鍵的特別,並通過位置能夠明白他具有可操作性,才能引導用戶領會到他究竟該如何使用。

無論從哪個角度看去,「小紅點」就是能夠首先被看到。

無獨有偶,「小紅點」的應用並非只有ThinkPad,這個視覺呈現方式在手機APP上也被廣泛應用。手機上的首創應用是在黑莓手機。黑莓手機在2009年推出的9700系列,其搭載的黑莓系統開始使用帶星號的小紅點形式。

然而,這項設計的專利在2013年被Apple公司註冊,並在IOS系統被廣泛使用,這個設計才為人們所熟知。同時小紅點也被正式命名為「Badge」。

這些「小紅點」的設計思路與ThinkPad一致,也是利用了人的注意力和圓的特性。那麼問題來了,為什麼這些小紅點都位於右上角呢?這與人的閱讀習慣有關。絕大多數人的閱讀習慣都是從左往右看,如果小紅點設計在左邊,那麼則會在大腦記憶里馬上被遺忘,而每一次被引起注意而查看的時候,位於右上角的小紅點就一次又一次成為區域視覺的終點,不容易被忘記。

APP設計當中的「小紅點」完美地利用了人性中強迫症的弱點,他的出現打破了手機平面app格局的和諧。因此,小紅點的設計成為了一項產品的運營利器,成功為其導流。

看似簡單的「小紅點」設計包含的設計原理和用戶心理非常複雜,涉及到多種不同學科的交叉。產品設計的每一個細節都有可能影響到整個產品的用戶體驗,當產品設計回歸用戶本身,或許才能真正的做到「為交互而生」吧!

*以上圖片來源於網路,如有侵權請聯繫刪除

參考文獻:

[1] 李麗環. 論視覺藝術中的「圓」的美學特徵[J]. 新余學院學報, 2012,17(5): 30-31.

[2] 鍾夏. 平面設計中幾何形態的運用——圓、方、三角的視覺傳達作用[J].警官教育論壇,2009,(00):59-63.

[3] 董晶. 紅色的視覺傳達[J]. 中國西部科技, 2006,(12): 70-71.

[4] 佚名. 觸控屏幕手指點擊的人體工程學[EB/OL]. 百度文庫.

[5] 高海燕. 視覺元素圓在平面設計中的研究和運用[D]. 合肥工業大學,2010.

[6] 黃雲. 標誌設計中圓形符號的文化內蘊及形式特徵研究[D]. 湖南師範大學,2016.

[7] 佚名. 用戶界面設計的一些方法和原則[EB/OL]. 人人都是產品經理.

[8] 晞仔. 交互漫談:詳解未讀消息時的紅點提示[EB/OL]. 人人都是產品經理.


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 億咖通 的精彩文章:

設計師的「格列佛遊記」
從設計師的世界出發,探尋主題設計的靈感源泉

TAG:億咖通 |