跳至主要內容

Firefox new UI

本文是翻譯自Stephen Horlander在5/09貼的(Re)designing Firefox
英文不好,中文也很爛,所以建議看原文比較好~
--
或許您已經發現,前陣子我們發行了某樣東西,過去我們稱呼它為Australis,
現在可以就叫做Firefox
我們在上面花了很多時間~
全心全意投入一個專案是個絕妙的經驗。你無時無刻想著它,不管是早晨、晚餐、準備看電影前、在浴室,甚至睡夢中,以及你該睡覺的時候。
突然間你要放飛它了,因為它終於夠成熟去闖蕩了。這相當令人期待同時也令人緊張。
你永遠不會知道這一路走來做出的決定是否正確。
我想趁這個發行後的激情時刻花點篇幅在這邊回顧一下。

歷史

左邊:Firefox 4, 右邊:Firefox29
所以我們是如何從這樣變成這樣的?
我們在2011年3月發行了 Firefox 4。相較於 Firefox 3 那是個大改變,首先它出現了 Firefox 按鈕,
改頭換面的附加元件管理,移除了狀態列,整合了停止、繼續與重新整理按鈕,還包含了全面的視覺升級,
同時在做一些改造時還有時間試做與取捨一些新功能原型。
然而它並非完美,在專案從設計到發行的過程中累積了不少粗造的痕跡。
Firefox 4 是我們轉移到快速發行前的最後一版,六周的周期時間看來很適合反覆雕琢這些眉角。
所以我開了一個新專案來做這件事。

理念

我開的這個反覆雕琢專案最終變成一個全面性的大改造。
照片中的人有 Sinchan Banerjee, Alex Faaborg, Brian Dils, Trond, Stephen Horlander (我的腿),
拍照的人是 Madhava Enros

在六月開始整個UX團隊舉辦了Firefox 4發行後第一次的辦公室外會議,議程上寫著「下一步?」整個團隊聚在一個房間內相互激盪新主意與未解決的問題,還有那些在開發 Firefox 4 中遇到的問題。漸漸有個主題浮現在共識之海上 ----> Firefox 最大的特色是自訂化,它必須代表個人化的東西。
這對我們做介面的來說是甚麼意義呢?很多點子被丟出來,然後一個基本原則成形了─>打造我們所能做出最好的核心經驗,並讓使用者去增加或改變那些他們認為影響最大的東西。
新的 Firefox 基本就是打造一個有趣簡易與容易使用的自訂模式,與之搭配的是更有彈性的Firefox 選單。

視覺設定

彎曲, 流線

該場會議也帶來了一些後來稱之為Australis的元素。一開始,先統一些毫不相干的釘選元件到主要視窗中,
修飾一下視覺設計,合併相關與更多的功能,並把分頁列流線化。
對於這個重新設計來說,自訂模式將會是新體驗的核心,而新設計的流線分頁列則是改變了Firefox 的外在印象。
“讓它看起來更快。不~不對!它需要更多的開孔”
Firefox 4 流體力學草圖 — 2010
我們探索了許多新點子,增加一些元素讓 Firefox 感覺更快更流暢,當中確實是有一些想法稍微太超過了。
曲線分頁草圖 — 2011,6月
Trond 的原型在設計會議中由發展而來出來這個有曲線的分頁草圖,馬上就得到所有人的共鳴。
這也包含另一個重要的設計修改,只展現目前頁面的分頁形狀,目的是減少視覺雜訊使目前頁面更被凸顯,並讓您使用分頁列時更容易聚焦。
初期嘗試了機種不同的曲線形狀。一開始是導角太小,後來的又太過圓潤,有的也太短或太高,
最終總算是找到最佳的感覺。
在Windows上嘗試的一些背景分頁設計 — 2011, 10月
後來我們瞭解在有靜態的背景下把背景分頁的形狀去除會簡單許多,Windows 7 的半透明視窗有各式各樣顏色,
而 Windows 8 則是多種顏色的平面,這表示我們需要自己做個靜態背景。
為確保背景分頁具有良好的辨識度,我們做了一些嘗試,一開始我們試做了統一的色塊背景,
但他看起來太重了,我們甚至考慮過保持背景分頁的外框並以其他方式凸顯目前頁面。
最終,我們決定使用一個霧化的背景,位在分頁與視窗之間,把它當作一個介面的三明治,
玻璃是底層,曲線分頁是上層而中間夾著美味的霧面
我們也要確保加上曲度後不會增加寬度而犧牲寶貴的分頁列空間,
我們也移除沒有使用favicons 網站原本預設的空白圖示,用小小的調整來爭取更多的標題空間。

目錄面板與自訂化

重新設計Firefox目錄

少有東西同網路瀏覽器這般複雜又因人而異,絕非一個尺碼就可以適用所有人。
附加元件一直以來讓 Firefox 成為一個可完全自訂化的瀏覽器,然而,組合這些東西體驗一向都不是很好。
但在我們開始對付自訂化之前,我們先來看看Firefox 選單,主要工具列是一些常用的動作的第一啟動層,
而功能表則是次要層,通常是為了一些比較少用的功能,我們希望使用者可以在這些層之間移動項目,
如此他們將可以自己訂做 Firefox 來符合所需。
我們一開始是從網格化一些圖示開始新排版,這個網格系統很好的呈現這些在工具列出現過的圖示,
而且會讓移動它們進出不同層有適當的拖曳力道。
較大的3x3格線加上標籤—Alex Faaborg 製作

我們設計的初版網格比較大,圖示比較小且沒有標籤,很快的就變成三欄式的網格配合上較大的圖示與標籤。
新版的設計可以更清晰的達成目的並避免擁塞感
並非所有Firefox目錄中的項目都會移植到新的版面,我們增加了一些特別的小工具給剪下、複製、貼上與頁面縮放,
名為"Wide Widgets",也增加了底欄放置那些不會被客製化掉的項目,避免使用者到時陷入自訂出問題爆炸沒得恢復的窘境
對於要使用圖示網格還是傳統的目錄列表,我們進行了許多激烈的辯論,
網格系統有一些缺點,當有很多項目時它不是很容易掃視也無法縮放,
但這回圖示網格因為它更佳的視覺性獲選,它更貼近我們想要的拖曳自訂化,也比較適用於觸控系統。
有些原本Firefox 目錄的項目包含子項所以無法直接簡化成一個動作,
像是開發人員工具、歷史、書籤、幫助與編碼。在旁邊疊上巢狀選項感覺怪怪的。
對此我們有幾個想法:排列可展開的選單抽屜(互動原形,History 可以點擊)與面板中的導覽列
我們選擇了一個叫 Subviews 的方案,Subview 簡單說就是列表會滑入覆蓋主選單,或是關閉整個選單並重開。
藉由這個新選單模式希望 Firefox 可以在安裝完即適用大部分使用者,
不過再加上新的自訂模式你可以更全面的把 Firefox 訂製為你要的樣子,
如果您對此有興趣深入了解如何怎樣怎樣的可以看看這篇方貞妁(音譯)的好文

全面客製化!

現在是該來面對 Firefox 老舊的客製化體驗了,從一開始我們的志向就很宏大,
希望可以整合工具列、主題與附加元件的客製化到同一個介面上,這帶來了一個早期的原型可以讓我們試試感覺如何。
這個測試展現了幾個問題:1) 把附加元件包含近來會相當複雜 2) 我們需要直接展開的目錄項目而不只是一個捷徑,
這進展出一些其他的試作品,有個更平面化的介面並精簡掉附加元件。
後來我做第二個展示用頁面,除了沒有主題選擇外更接近後來發行的版本。
然後Blake Winton把他調整成一個很棒的原型,你可以在上面嘗試操作一些功能(tools icon –> plus sign之類的)。
最終的客製模式

這些試做頁面與原型幫助我們快速得到他人的回饋與想法。其中一個抱怨說當進入不同模式時感覺不明確。
我們用很多樣版嘗試不同的點子,用視覺回饋讓人們感覺是進入了一個你可以重新排列這些東西的模式,
最後我們定下了一個精湛的藍圖式樣,並在Madhava建議下增加一些動畫與間隙。

打包上架

感謝所有投注時間與精力讓此時線的人們,如果你想要了解更多關於Firefox 29的製作人員與過程,Madhava寫了一篇不錯的摘要

我想這個發行後的興奮體驗到此為止了,該回去繼續把Firefox打造得更好摟。

留言

此網誌的熱門文章

小裁縫之路序章:量身

敝人因吃飽太閒,報名了裁縫補習班,秉持著網路分享精神,在此將所學與大家分享順便當復習,學費我來付~裁縫大家學,哈。 -- 課程內容主要是講上衣的板型設計,因此技法方面還是要靠自己,悲劇的是頭兩堂課因為要出差所以都缺課,錯過許多重要的觀念。一開始畫圖比較多,然後預計會制作一件上衣一件洋裝。 服裝制作首先最重要的就是量身了,精確地取得各部位的尺寸是很重要的,因為很多衣服需要量身才好看,這點是成衣無法與高級服裝相提並論的重點 一般常量到的記號有以下: 後頸點(B.N.P):第七節椎骨上端,低頭時的凸點。 側頸點(S.N.P):僧帽肌中點與領圍線的交叉點。 肩點(S.P):肩峰與肩胛骨的交叉點。 前頸點(F.N.P):前鎖骨連線中點。 背長(BL):側頸點沿肩胛骨至小腰線。 前全長(FL):側頸點沿B.P點至小腰線。 後肩寬:後身量肩點至肩點。 肩寬(SW):前身量肩點至肩點。 小肩:側頸點至肩點。 背寬(BW):左右腋點經肩胛骨長。 胸圍(B):兩BP點與地面水平量一圈,注意有吐氣與吸氣兩種 腰圍(WL):腰部最細軟處合身量,無褲頭減一公分(製圖時) 臀圍(HL):臀部最突出處與地面水平量一圈,從腹圍(腰下十公分)往下量最大處 領圍(NL):後、側、前頸點放一手指量一圈。 胸寬:左右前腋點間直量。 BP長:測頸點至BP點。BP寬:BP間距。 肘長:肩點至肘骨。 袖長:肩點、肘長、腕股,非直線須分開量。 乳摺份(D):依FL-BL差調整。 脇腰長:側身量WL至HL 膝長:側身量WL至膝骨距離,此值決定窄裙的活動量。 裙長、褲長、前脇:依照流行款式決定,皆以WL為基準開始量。 量身的其他小技巧:一般會先在腰線上綁一條細鬆緊帶,作為WL線基準,量一圈的要注意是否與地面平行,這樣量到的才會是正確的。量背寬與胸寬將衣服夾在一下看摺線位置就是量取點,良好需要的身體尺寸後,就可以依照尺寸來製版。 製圖上有以下常見符號,但照習慣可以更改 總歸來說,要做衣服一般是以下步驟 畫設計圖,選擇布料 量身體尺寸 分析車縫步驟、縫製方式 準備製版(尺寸、配件),左右不對稱要同時製版 上衣、洋裝:後片 → 前片 →領子 →袖子 →配件。 褲子與裙子:前片 →後片 →配件 剪裁(注意馬克圖、布紋方向) 縫製(後面...

巨大船舶螺旋槳

好久沒寫了~來分享很無聊的東西,翻譯DRB上面的文章。 大船的螺旋槳,這是平常看不到的,不過是非常宏偉有力的巨物 喝~想當時在1834-5年Rev. Edward Lyon Berthon發明這種螺旋的推進器時,在上面的當局可是戲稱這精美的玩具-永遠不能也不會-推動一艘船。 當然現在多數船舶都是靠這玩具推的,相關的研究與技術發展也越來越多,後來發現要做好還真是相當困難啊! 現在精巧的高級品大約直徑30公分就要幾百萬了~這些大船用的就更不用說多麼價值不斐啦! 左下角是由 Stone Marine Propulsion 做的85噸螺旋槳,上面和右下是 MMG 的 -- 世界最大的螺旋槳之一,泡菜現代重工做給赫伯羅特一艘7200 TEU的貨輪,直徑9.1米,六葉重101.5頓。 但是呢~上圖並不是這隻螺旋槳,是另外一隻72噸的。 -- 目前最大的應該是德國Mecklenburger Metallguss公司做的,總重131頓,裝在Maersk最大的貨櫃輪上,一艘可以上14770個20呎櫃的巨獸,397米長,56米寬跟68米高, 詳細如此 圖片來源 上圖則是大西洋破冰船- Palmer 的螺旋槳,旁邊有保護罩避免"冰刀"。 下面是一些Holland America Line的Eurodam號的螺旋槳圖。 下面這張是正在裝"新阿姆斯特丹號"的螺旋槳 -- 鐵達尼號應該是全世界最有名的一艘船,她的螺旋槳同樣也很巨大~三個獨立的引擎推動三組銅製的螺旋槳,兩邊的重38頓而中間的是17頓 鐵達尼號或許是那個時代最優秀的船,但是下面這個海洋綠洲號大概有她的五倍那麼大~也是目前最大的客船,當然這樣的大船也需要巨大的螺旋槳把她從芬蘭的出生地送到佛羅里達的工作地~ 不過這艘船竟然也是韓國船STX造船廠的作品~泡菜造船真強。 另外一艘Carnival Cruise Lines 的船 Elation,也是芬蘭製然後送到美國,目前待在聖地牙哥 她的螺旋槳一樣讓安裝的工人看起來像小人國的傢伙。 下面則是一個在舊金山港船塢的螺旋槳 這些是另外一家渡輪公司Norwegian Epic的黃銅螺旋槳 Celebrity Solstice的螺旋槳,一樣可以看出到底有多大~ 這個則是鼎鼎大名的...

Firefox 字體平滑 設定

算是筆記一下 Firefox 6之後有個重要(對我來說)的功能就是設定Cleartype的選項,還蠻強大的,算是半套GDI++的功能包含其中。啟動方式很簡單,就是到about:config然後在filter中打入gfx,就會出現像是色彩管理及畫面輸出等相關設定 個人設置如下 gfx.font_rendering.cleartype.alway_use_for_content=ture /*對所有內容打開*/ gfx.font_rendering.cleartype.use_for_downloadable_fonts /*預設開啟*/ gfx.font_rendering.cleartype.params.cleartype_level gfx.font_rendering.cleartype.params.enhanced_contrast /*這兩者依個人喜好設定,數值0-100,個人沒將cleartype_level開滿因為會覺得有點糊*/ gfx.font_rendering.cleartype.params.force_gdi_classic_for_families /*類似GDI++可以依字型設定輸出平滑方式,但是只有分系統預設方式及Fx自己的方式,若覺得系統方式渲染更好的字型就加進來*/ gfx.font_rendering.cleartype.params.force_gdi_classic_max_size /*用系統cleartype輸出字型最大尺寸,大於本尺寸的字型不用cleartype輸出*/ gfx.font_rendering.cleartype.params.gamma /*gamma值,一般2.2=2200,1.8的就設定1800*/ gfx.font_rendering.cleartype.params.pixel_structure /*液晶螢幕的陣列,一般都是RGB所以設定1,0 = flat, 1 = RGB, 2 = BGR */ gfx.font_rendering.cleartype.params.rendering_mode /*重點項目,0 = default 自動選擇, 1 = aliased 不平滑輸出, 2 = GDI Classic 普通的,用整個像素控制, 3 ...