人人都能懂的設計方法論:界面 X 字體 X 創造力

2020-12-16 極客公園

極客公園在上周 Audi City 舉行 Geek+ 線下活動,來自 eico design、方正字庫與 bong 的嘉賓們,帶來了一場關於界面、字體與創造力的技術連彈,與在場的 60 多名極客探討了「科技與設計的共生關係」。

濟濟一堂的極客們

最終,界面沒有界面

by eico design 項目經理及互動設計師 喻秦主題演講《界面之後的「界面」》

按常規理解,界面是我們與機器溝通的一種語言,而機器本質上是一個更高級的工具。在過去,刀劍、扇子等工具並不能聽從人類指揮,而電腦的發明則使人類第一次可以給創造的工具下達指令——計算公式、破解密碼等等。

在很長一段時間內,人類為與機器溝通,被迫學習機器的語言,直到 1984 年 macintosh 普及了圖形化界面,溝通語言第一次以人為中心。而這種使用桌面、圖標等隱喻的溝通方式與今天最新的系統相比,本質上並沒有改變。

人機界面發展史:1984 年與 macintosh 

真正引爆圖形化界面革新的,是 2007 年 iPhone 帶來的觸屏界面之普及,界面的輸入與輸出合二為一,大幅降低了人機界面的學習成本和使用難度。這預示著我們進入全新的界面時代——沒有界面的界面,並以手勢、語音這些自然的交互方式和界面形式為表徵。

因此從長遠來看,人機界面會逐漸貼近人類溝通方式,其學習成本將逐漸走低。同時,人機界面的載體與人的物理距離也在趨近於零:初期的巨型機需要我們奔赴工廠或公司才可使用,而現在,手機能被放置在口袋中隨身帶走。

目前,在我們與生活服務連接的平臺中,智慧型手機是最強的。但有趣的是,一些新興品類會直接套用既有品類的界面語言(例如,特斯拉的車機直接拷貝了 iPad 界面),因此從這個意義上來說,智慧型手機的界面語言會直接影響下一個新興的界面語言。

雖然,直接套用的界面語言讓人能更好地熟悉,卻未必適合新的使用場景與硬體特性:特斯拉那款 17 寸的大屏在陽光下令人「無法直視」。因此,真正適合的界面往往從混亂中成熟,就如當年從 Windows Mobile 主宰中脫穎而出的 iOS。

同語音、手勢、面部識別、眼動、觸覺連接的自然用戶界面

由此,自然用戶界面將真正開始普及。例如智能手錶界面會拋去解鎖、按鍵等繁瑣動作,不再是手機界面的縮小版,而是可以使用當前與硬體本身特徵相關的界面——一個可能由手勢與動作詮釋、基於體感和觸感的界面。

與之對應的趨勢是,界面的要素將逐步後退,信息本身將成為界面,出現在各個平臺,故界面語言的跨平臺性將變得至關重要,畢竟設計與維護所有平臺界面的成本極高。從這個意義上談,Windows Mobile 和 iOS 7 所標誌的圖形化界面之跨平臺使用,具有裡程碑式的意義。

因此,既有平臺與孕育出的新平臺在經歷一段相互影響的不穩定後,他們將逐漸區隔於彼此,被每一個品類獨立採用,多元化地組合交互方式和界面形式。

未來也許是脫離傳統觸摸的、更為直覺的。在這種可能下,構成信息本身的那些字體排版、圖片組合將變得更為重要,可能也預示著視覺設計的重新回歸。 

字體之美:從人文到技術的循環演進

by 方正電子 字庫開發總監 仇寅主題演講《從媒介變化看字體變遷史》

設計的本質是滿足人類,所以在功能性表達上也需要更多柔軟與溫情。當我們回顧字體發展史「尋找溫度」,一條是書寫,一條則是印刷字

甲骨文到篆書再到楷書的演變,也是手寫漢字由複雜到簡單,到清晰再到美觀的過程。由線條組成的甲骨文與篆書,個性度低、容易混淆,而有了比劃、撇捺點折的楷書,則令漢字更為容易識別。1500 年前的楷書時代,漢字字體的發展便終結了。

手寫漢字發展史:易識、易寫、美觀(充滿個性、靈性、親切的人文感)

印刷字的發展則與媒介有極大關聯。最早的文字刻於甲骨,後鑄於青銅、刻於石碑、書寫於書簡和布帛,最後發明了紙張。宋朝的雕版印刷由人工在木板上一字一字刻成,其樣式開啟了宋體字的初級階段。經過元代的雛形時期,現代宋體字在明中期定型。換言之,我們開始實現了印刷字的標準化,這從楷書產生到宋體字形成,其間走過了一千年。

清朝基本沿用了明代體例。而民國時期的印刷字體再造輝煌,從仿宋到多樣化楷體,皆充滿人文色彩與脈脈溫情。21 世紀的今天,黑宋仿楷的出現並未帶來實質性改變,只是在精緻度、適度性及排版優良性方面獲得長足進步:程式化、整齊度和統一性,讓我們便於閱讀。

然而,這種幾何、嚴整與冷靜的代表,顯得刻板與工業,不如手寫文字有靈性、令人親切。因此在清朝兩種字體並行,以宋體字為主的叫硬體字,刻起來方便省錢,而有錢人則使用手寫體為主的軟體字。

到了新的媒體時代,紙質媒介與屏幕媒介共生,屏幕閱讀越來越成為主流,這種變化為字體設計帶來全新挑戰,其中最為重要的是不連續變量和自發光產生光暈。

(1)不連續變量

紙張中的圖形皆為連續變量,一條光滑的曲線是沒有臺階的。相較而言,由像素構成的屏幕充滿臺階。這種不連續變量造成每個漢字的橫劃排列會產生臺階式越變:同一款粗細的字體在不同字號下,顯示的字不一樣。

量:從 5 磅到 7 磅

(2)自發光產生光暈

紙上的反光由光照在紙上反射而得,因此看到的文字與圖像並無光暈。屏幕中的筆畫則是自發光,便帶有光暈顯得模糊。如將電腦亮度調高,光暈加深筆畫即變粗,這是在黑底白字的呈現。如果白底黑字,顯示則與之前相反,因而屏幕也有其特殊性。

置與矗:從 0 到 100

此外,屏幕的不斷發展也為字體設計創造了優良條件,精度由原先的 96ppi 發展到現在的 300ppi 以上,變得更為精細、富於人文色彩。給了我們如下啟示:首先,筆畫得到了更為精緻的安排,橫劃之間的距離在軟體的幫助下變得非常容易測算;同時,結構塑造要求形散而神聚,不能喪失漢字的靈性與神魂;更多的字體家族被設計出來,在臺階式越變的情況下,讓用戶能自由挑選不同粗細的同一字體;適合屏幕顯示的字體之稀缺,也亟需開闢新品類。

贏:從低精度到高精度

以方正第二代屏顯字體為例,設計上應特別注重識別性與美觀性。

(1)識別性

中宮對漢字的影響極為深刻。做字之時,需要讓中宮既能維持漢字的輪廓特徵,又能保證中間筆畫的清晰度。方正第二代屏顯字體因為收緊了中宮,讓每個字輪廓更為明顯,閱讀體驗也更為舒適。

(2)美觀性

美觀的標準之一是耐看。頻繁接觸幾何化與工業感設計,人們難免產生牴觸、希望重歸人文。因此字體被造出後,通常有相應的產品周期。在悠黑的設計中,技術與藝術的平衡成為主要追求。標準之二則是適讀,閱讀用的正文字體,應能「看不出風格」地進行自然訴說,而非因個性幹擾信息。

當我們考慮正文字體的選擇,要回歸用字的核心目的,究竟是展示還是閱讀?根據內容和受眾,考慮風格、字面、字重,通過默誦與對比,回到閱讀體驗中去檢驗才能真正關懷用戶。 

流暢的產品設計背後,是創造力:以 bong 為例

by bong 智能手錶創始人 & CEO 顧大宇主題演講《縮短人與信息之間的距離》

創造力對創業者而言,是必須要解決的問題。在 bong 的理解裡,把握本質和打破常規構成了創造力

(1)把握本質

回溯歷史,人類社會其實非常簡單,安全感、社會價值實現、影響力傳播、傳承後人等需求,千百年來並未改變。現在的產品經理,需要找到這種根本需求並以產品的方式還原,這或許與當年魯班的做法如出一轍。

在 bong X2 中,自然操作是我們把握的本質。為了讓用戶查看智能手錶信息,無需雙手費力地觸碰、操作,我們設計了單手控制。同時,追蹤睡眠也必須是全自動的,因此 Bong 在兩年前製成的睡眠追蹤識別算法,既是世界第一個,也成為了業界標準。

(2)打破常規

網際網路的試錯,即突破既有,實現真正的創造。Cardflow 是 bong 非常重要的信息呈現方式,打破了 App 的信息架構,是單軸的、由許多 Card 的簡單信息串接而成。

它也來源於我們另一個重要觀點:縮短人與信息間的距離,即接受信息時需要轉化的成本、門檻、場景應越少越好。這是基於人腦的單線程思維模式,時時跳躍、無法同時思考很多,讓用戶往往不願意去理解多線程。因此,bong 不裝 App,因為 App 只是信息接入的載體。而 Cardflow 能幫助 bong 將單軸信息,儘可能貼近人。

最後的 Workshop 上,全場 6 組極客就「如果人們失去視覺,產品界面將發生哪些變化」及「2050 年,在文字的載體、設計和閱讀上,將發生怎樣的變化」展開了思維競技,以下綜合最優勝的團隊答案,以饗讀者。

如果人們失去視覺,產品界面將發生哪些變化

人類失去視覺後,還剩聽覺、嗅覺和動作,因此屏幕將不復存在,界面可能會成為基於那三種感官能控制的任何設備,發出的聲音、產生的熱量、感受到的震動、聞到的氣味,都將是這類設備所產出、為人所接受的。

在這種狀態下,交互被拆分成了兩部分,一部分是人對系統或產品的指令,即輸出;另一部分則是系統對人的反饋,即輸出。在動作控制中,可以被觸摸的手環,便是可接觸性的,不能摸到的踢與跑,是不可接觸性的。

此外,交互也有主觀與非主觀之分。值得一提的是非主觀情況,例如通常情況下,人不希望系統記錄夜晚睡眠的心率,但當身體不適等特殊時刻,系統也能實現記錄。

分工合作的小組成員

2050 年,在文字的載體、設計和閱讀上,將發生怎樣的變化

聯想到越來越多的近視眼同學,在閱讀時非常受累。2050 年時,文字可能會依託某一種載體,能主動判斷承載人的視力水平,面向文字時便自動看清,讓人恢復 5.2 的視力。

同時,產品說明書與產品將緊密結合,不再以單薄的紙呈現,也許能與語音等結合。例如,做危險動作會收到聲音提醒。通過這種方式,用戶看說明書的同時能進行情感化的交流。

相關焦點

  • 譯文|界面設計中,關於字體設計的10 個錦囊
    字體作為界面設計的一個元素,對用戶的閱讀體驗起著至關重要的作用。本文是 UI 設計師 Viljami Salminen 分享的用戶界面字體設計的基本規則和技巧。在現代的交互界面中,文本即界面,字體設計則成為主要的設計規範。字體即界面設計的基石在用戶界面中,每一個單詞和字母都至關重要。好的字體等於好的設計。字體成了界面設計的基石,而我們設計師,則是這些這類「信息基石」的修造者。觀察下面這個例子,想像一下,把以下圖片中的元素拆解開來,看看會是什麼樣子——一個個單詞、兩張圖片、幾個圖標。
  • 界面視覺設計要素:字體篇
    字體是界面設計中重要的構成要素之一,它能輔助信息的傳遞,是文字的外在表現形式;字體還可以通過其獨有的藝術魅力,表達情感體驗,並塑造品牌形象。本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。一、字體1.
  • APP界面的字體規範!
    文字設計是界面設計中最細節的部分,也是最不可忽視的基礎部分。在界面設計過程中要考慮兩大因素:文字辨識度和界面的易讀性。在任何一個有效的界面裡,具有層次的設計可以將界面上重要的部分與次要的部分區分開來,可以從對齊、間距、顏色、縮進和字體等方面做文章。當所有這些都調整運用得適當時,可以提高整個界面的可讀性。很多剛做APP界面的設計師,經常會因為字號、字體顏色、間距而困擾。
  • APP界面字體的規範使用
    一個好看的界面設計,文字的設計是不容忽視的,也是最細節的部分。針對文字設計,我們需要考慮的兩大因素:文字的辨識度和界面的易讀性。
  • 行動裝置的界面設計尺寸(強烈建議收藏!)-20140225早讀課
    廢話不多說,希望大家耐心看完後,不用再糾結於尺寸相關的東西了~界面尺寸:1024x768、2048x1536(以上單位都是像素哦,至於解析度一般網頁UI和移動UI基本上都只要 72 ppi)        當然,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用 640x960 或者 640x1136
  • len(x) 擊敗 x.len(),從內置函數看 Python 的設計思想
    有些人在質疑/抨擊 Python 的時候,也喜歡拿這點說事,認為這是 Python 的設計缺陷。這就引出本文最想討論的一個問題來:為什麼 Python 要設計成 len(x) 這種前綴表達,而不是 x.len() 這樣的後綴表達呢?
  • Airbnb前端工程師告訴你,如何在設計中選擇正確的字體和版式
    作為一名設計師,你需要學到的最重要的技能之一就是如何選擇字體。這是因為文字內容是設計師與用戶溝通的主要方式之一,版式可以決定設計的成敗。排版工作兼具美感和複雜性,有些人把自己整個職業生涯都獻給了字體設計。幸運的是,他們的工作都以文檔的形式,很好的記錄了來,讓我們在設計時,有大量的資源可以學習。
  • 移動界面尺寸!安卓720*1280界面尺寸規範參考
    今天25學堂的老譚童鞋跟大家繼續分享720*1080的界面設計尺寸規範。主要講解 屏幕分辨:1280×720像素(720P)  APP界面設計規範。這樣的手機又vivo智能收款機、三星Galaxy A5、華為榮耀等手機。
  • 界面設計必備!全方位科普常用的字體規範
    應廣大群眾要求,今天@Micu設計 同學不說高大上的教程,來點即學即用的乾貨,從界面中文字的使用規則到字體顏色的選擇,都有具體細緻的說明,非常適合基礎不紮實的同學。想一次性搞定字體這個關鍵點,馬上學起來 >>>好長時間沒發帖,淨想過年了,過年哈,倒騰工作總結和年貨是大事。
  • 顛覆四葉草設計 聯想VIBE X UI界面賞析
    聯想旗下全新子品牌VIBE,近期推出了主打時尚外形設計全新產品VIBE X。該機外形設計靈感源自水滴,背殼採用金屬織物質感設計,設計時尚纖薄,整機厚度僅為6.9毫米。而且該機在硬體方面也有著不俗的表現。
  • 電商APP界面設計的思考
    今天, 小編精心挑選了幾款國外優秀的電商APP設計界面,希望對於想要學習APP設計和布局的技巧的小夥伴有幫助,一起來看看吧!這是一款很典型的簡約扁平化風格的APP界面設計,仔細欣賞給人感覺很舒服,右側詳情頁採用卡片式方式陳列,布局整齊又美觀。
  • 界面好看,字體當然不能拖後腿
    網易考拉品牌升級明確規定中英文字體運用字體在設計中重要程度越來越高,文字不僅是閱讀形式一種,不同的字體不僅能影響排版,同時也能反應出產品的性格。越來越多的品牌把字體設計融於品牌DNA中,上圖是在網易考拉改版設計中,針對中英文字體和整體品牌的融合 。
  • APP界面設計:如何選符合產品氣質的字體
    iOS7字體設計規範以及APP設計中英文字體下載Android系統當中的APP界面設計字體:英文字體:Roboto         中文字體:Noto   (Android 5.0 Lollipop 思源黑體字體)也是目前安卓系統當中使用的最新字體,之前的字體還有如下Droid字體。字體設計也比較優雅。
  • 達文西15/16 操作界面字體太大太小如何設置
    相信大家在高解析度屏幕2K/4K下使用達文西調色軟體時會遇到字體過大或太小的問題,但是達文西軟體內又沒有設置界面字體解析度等選項實在令人頭疼,其實只需要簡單幾步就可以解決。第一步:右鍵[達文西]啟動圖標 -> 打開目標所在位置第二步:在目錄中找到啟動圖標右鍵 -> 屬性第三步:勾選[兼容模式] 選擇Windows8/7都可以,這個不影響,最主要的是[更改高DPI設置] -> 替換高DPI縮放行為 裡面選擇[系統]或者[系統增強]
  • 你想要安卓UI設計尺寸規範
    x 12803202.048dp96pxhdpi480 x 8002401.548dp72pxmdpi320 x 4801601.048dp48px 字體 Typography中文字體:思源黑體Source Han Sans / Noto(是一個字體,叫法不同而已)英文字體:Roboto注意:安卓的字號單位是SP
  • 3分鐘掌握替換字體文件,我提供的字體究竟應該如何使用?
    這種方法我是不推薦的,因為每個手機的主題系統和字體包調用系統規則大相逕庭,可能會導致正常的字體在你的手機上顯示行距字據出現問題、字體上浮或者下沉嚴重等現象,出現這種問題請不要找我,我也無能為力(各種各樣的手機太多了,我不可能全買了給你適配),請自行解決。
  • Kith x Nike x NBA三方聯名型錄公布
    Ambush x Dunk Hi粉色確認發售時間隨著Ambush x NBA x Nike三方聯名的發售,Ambush x Dunk Hi的首發配色——黑白熊貓色也與其三方聯名服飾同步發布,不知道有多少朋友原價入手了呢
  • 學過微積分的你見過x^x的不定積分嗎?答案是沒有
    學過微積分的朋友,我相信你從來沒有遇到過x^x的不定積分,因為它的難度是難以想像的,或者根本就不存在原函數,也就是它沒有不定積分但我們可以繼續深刻探討下,看看有什麼有趣的發現,或許能擴展下你的數學視野如下
  • 漲姿勢 | 從方程式X到X射線、X戰警:為什麼未知數中排第一位的是x?
    筆者小學數學課本上的x寫作兩邊都彎彎的x(這是latex中x的寫法),頗有文藝復興時期藝術作品的線條感,這在無形之間增加了這個字母的神秘感。這個詞語發音類似於「shin」,古西班牙語發不出這個音,於是就借鑑了希臘字母x,讀作「凱」,例如統計學中的方分布。因此就是「x」的老爹——外形上很難區別,只有讀音能把這兩父子分開來。
  • 【設計乾貨】最實用的「羅馬字體設計」攻略,沒有之一
    這不僅適用於三角形、圓形、矩形這些基本行狀,而是可以應用在字體設計中的每一個字母,是很重要的一條法則。甚至你設計拉丁文、希臘文都可以應用。不論字體是否分為襯線體或者無襯線體,他們都是根據不同的書寫方式而來。上面的字母是通過尖筆書寫的,其中的對比是通過改變筆的不同壓力,而不是因為筆的形狀。Bodoni就是一個例子,但是無襯線體Helvetica也屬於這種。最寬的部分基本都是垂直的,從這點來說Bodoni和Helvetica沒什麼不同。他們有著同樣的結構,只是對比不同而已。下面的字母則是起源於癟頭筆。