Nativefier 是一種命令行工具,可以用最少的配置輕松地為任何網(wǎng)站創(chuàng)建桌面應(yīng)用程序。它是由 Electron 引擎生成的可執(zhí)行文件(.app .exe 等),能夠運(yùn)行在Windows,MacOS和Linux平臺(tái)。
GitHub頁(yè)面:https://github.com/jiahaog/nativefier
這里我以 Windows 10 LTSC 1809 作為演示,首先需要安裝Node.js,最新版本默認(rèn)集成了npm,進(jìn)入官網(wǎng)下載并安裝到計(jì)算機(jī)。下載地址:https://nodejs.org/zh-cn/
安裝好 Node.js 之后,還需要設(shè)置全局變量,因?yàn)榧虞d極為緩慢,這里我們使用淘寶源來(lái)進(jìn)行操作會(huì)快上不少。找到系統(tǒng)屬性 – 高級(jí) – 環(huán)境變量 – 新建用戶變量。變量名:ELECTRON_MIRROR 變量值:http://npm.taobao.org/mirrors/electron/
接下來(lái)就到了安裝 Nativefier 的環(huán)節(jié),只需在cmd命令提示符中輸入 npm install -g nativefier 即可完成安裝。
最后,就可以用 Nativefier 來(lái)生成你想要的桌面應(yīng)用程序了。例如要為https://www.smbinn.com創(chuàng)建桌面應(yīng)用程序,只需在cmd命令提示符中輸入 nativefier “https://www.smbinn.com” 生成后的程序默認(rèn)在C盤用戶文件夾。
最終效果如下圖所示
于每天日常的工作需要,我需要接觸大量的外文資料,因此,一個(gè)好用的翻譯工具必不可少。得益于 Google 在翻譯上的優(yōu)秀表現(xiàn),將它作為我的主要翻譯工具使用也是無(wú)可爭(zhēng)議。但是在使用中經(jīng)常會(huì)發(fā)現(xiàn),web 端的頁(yè)面總是會(huì)在不經(jīng)意間被手滑關(guān)掉,要用的時(shí)候找了一會(huì)才發(fā)現(xiàn)需要重新打開(kāi)。
此外,想要在工作時(shí)間更好地進(jìn)行「摸魚(yú)」,用電腦肯定會(huì)比用手機(jī)更安全。
有了這兩個(gè)需求,我尋找了數(shù)款能夠?qū)?Web 轉(zhuǎn)換成 Mac app 的工具,但在體驗(yàn)之后都發(fā)現(xiàn)會(huì)有這樣那樣的小問(wèn)題,有一些甚至無(wú)法工作或是生產(chǎn)的 app 無(wú)法打開(kāi)。
直到我發(fā)現(xiàn)了它 —— nativefier。
nativefier 是一個(gè)基于 Electron 的命令行工具,完全開(kāi)源,沒(méi)有 UI 界面,且無(wú)需安裝任何 app,只需要通過(guò)一行簡(jiǎn)單的代碼,就可以輕松地將任何 Web 頁(yè)面打包成可以在桌面運(yùn)行的 app,并且支持在Windows,Mac 甚至是 Linux 系統(tǒng)上運(yùn)行。
P.S. 作者是一位在 Google 工作的軟件工程師,似乎是一位華人。
目前,nativefier 在 Github 上已經(jīng)獲得了 2.14 萬(wàn)個(gè) Star。
使用 nativefier 的過(guò)程非常簡(jiǎn)單,但需要提前準(zhǔn)備一些東西。這里我以 macOS 作為演示,其它平臺(tái)大同小異,可以參考網(wǎng)上的其它教程。
首先,我們需要安裝 Node.js。你可以通過(guò)到 Node.js 的官方網(wǎng)站下載之后進(jìn)行安裝,但我這里更推薦使用 Homebrew,這樣就可以在一個(gè)終端 app 里搞定全部的事情。
如果你還沒(méi)有安裝 Homebrew,可以通過(guò)下面這一條命令在終端進(jìn)行安裝。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
更多關(guān)于 Homebrew 的使用,可以參考這篇文章。
安裝好 Homebrew,就可以安裝 Node.js 了。在終端內(nèi)輸入:
brew install node
如果因?yàn)槟承┚W(wǎng)絡(luò)原因安裝緩慢,可以試試換成國(guó)內(nèi)的鏡像源。跑完進(jìn)度后,可以在終端中輸入 node -v 和 npm -v,測(cè)試一下版本,出現(xiàn)版本號(hào)即說(shuō)明安裝成功。
有了 Node.js,我們就可以來(lái)安裝 nativefier 本體了。同樣是在終端,輸入下面的命令:
npm install nativefier -g
如果提示權(quán)限不足,可以試試在前面加上 sudo:
sudo npm install nativefier -g
搞定。接下來(lái),我們就用 nativefier 來(lái)制作一個(gè) app。
最簡(jiǎn)單的使用方法,只需要用 nativefier 加上一個(gè)你需要轉(zhuǎn)換成的網(wǎng)站地址就可以了。例如:
nativefier "https://www.sspai.com"
第一次運(yùn)行會(huì)下載 Eletron 框架,可能會(huì)慢一些。
命令執(zhí)行完畢后,會(huì)生成一個(gè)大小在 120 - 150M 左右的,名為「 ---darwin-x64」的文件夾。如果你沒(méi)有更改運(yùn)行地址,那么會(huì)默認(rèn)出現(xiàn)在你的個(gè)人文件夾中。
點(diǎn)擊進(jìn)入文件夾內(nèi),就能看到剛剛制作好的 app 了。將這個(gè) app 拖入到應(yīng)用程序文件夾中,它就會(huì)出現(xiàn)在 Lanchpad 里。
一個(gè)網(wǎng)頁(yè)打包的少數(shù)派 for Mac app 就做好了。
上面的這個(gè)方法,會(huì)自動(dòng)抓取網(wǎng)站的名字和 Logo 來(lái)作為名稱及 app 圖標(biāo)。但有時(shí),nativefier 也會(huì)「翻車」(比如上面 app 名字顯示成了「--」),這時(shí)候就需要我們自定義 app 的名稱。可以用下面這條命令:
nativefier --name "在這里輸入 app 名字" "http://www.sspai.com"
注意,這個(gè) app 名字不支持中文。如果你想要更改中文的 app 名稱,可以在 nativefier 制作好的 app 上直接更改,再拖入到應(yīng)用程序文件夾中。
不過(guò),nativefier 有個(gè)小瑕疵:由于有些網(wǎng)站的圖標(biāo)或 logo 形狀不好看,又或者太丑、分辨率太低,導(dǎo)致有些時(shí)候生成的 app 圖標(biāo)無(wú)法令人滿意。
這個(gè)問(wèn)題其實(shí)也有解決辦法。nativefier 提供了一個(gè) --icon 的參數(shù),只要我們準(zhǔn)備一張 png 格式的圖片,就可以應(yīng)用成圖標(biāo)了。
如果你不太明白上面在說(shuō)什么,你也可以手動(dòng)進(jìn)行替換。提前準(zhǔn)備好一個(gè) icns 格式的圖標(biāo),并命名為「electron.icns」,然后在生成好的 app 上右鍵點(diǎn)擊「查看包內(nèi)容」,進(jìn)入「Contents - Resources」,將我們準(zhǔn)備好的圖標(biāo)放到里面替換原來(lái)的圖標(biāo)即可。
例如,我這里就用 Sketch 為 Tinde 和小特畫了一個(gè)和 macOS Catalina 原生風(fēng)格類似的高清圖標(biāo) ,然后再用 Image2icon 轉(zhuǎn)換成 icns 格式,替換之后,就沒(méi)有這么強(qiáng)烈的「像素風(fēng)」了,違和感也降低了不少。
這個(gè)頁(yè)面里有 4 個(gè) app 都是用 nativefier 生成的
除了這些之外,nativefier 還提供了很多可供選擇的參數(shù),例如是否要限制 app 窗口的寬高、是否顯示菜單欄、、是否在關(guān)閉時(shí)推出、是否開(kāi)啟 flash 支持等等,你可以在終端直接輸入 nativefier 或 nativefier -h 來(lái)查看,或者是閱讀官方的 API 文檔 來(lái)學(xué)習(xí)。
哦對(duì)了,nativefier 制作的 app,甚至還支持調(diào)用系統(tǒng)的推送。例如將微信網(wǎng)頁(yè)版打包成 app 之后,有新消息來(lái)時(shí),一樣也能夠收到新消息通知。
好了,nativefier 就給大家介紹到這里,我要用剛打包好的 app 去摸魚(yú)了。
輯導(dǎo)語(yǔ):在產(chǎn)品設(shè)計(jì)中,細(xì)節(jié)之處有時(shí)隱含著許多值得思考的地方。Web表單界面設(shè)計(jì)便是如此,比如標(biāo)簽設(shè)計(jì)中,哪種標(biāo)簽對(duì)齊方式更好?標(biāo)簽?zāi)┪灿质欠裥枰用疤?hào)……設(shè)計(jì)師應(yīng)該如何解決這些細(xì)碎的問(wèn)題?本篇文章里,作者就Web表單設(shè)計(jì)中的“冷知識(shí)”進(jìn)行了總結(jié),一起來(lái)看一下。
當(dāng)我們?cè)O(shè)計(jì)Web表單時(shí),往往用最直覺(jué)的設(shè)計(jì)經(jīng)驗(yàn)本能驅(qū)動(dòng)我們?nèi)ソ鉀Q一些看似在界面設(shè)計(jì)中最簡(jiǎn)單的問(wèn)題,但每每到細(xì)微之處,又會(huì)有無(wú)數(shù)疑問(wèn)從細(xì)節(jié)中冒出來(lái)給我們的設(shè)計(jì)造成困擾。
例如:在表單界面Label(標(biāo)簽) 和 Input(輸入框) 上下還是左右排列合理、Label要不要加冒號(hào)、輸入框到底多寬合適等等……
以上這類問(wèn)題看起來(lái)并不影響用戶完成任務(wù),很久以來(lái)也少有人關(guān)心這些細(xì)微之處會(huì)不會(huì)對(duì)用戶有什么影響。
以至于,我表達(dá)想寫一篇探究這些細(xì)節(jié)的文章時(shí),同事會(huì)偷笑說(shuō):你都開(kāi)始研究標(biāo)簽?zāi)┪惨灰用疤?hào)了嗎……太冷了——真是個(gè)冷知識(shí)!
確實(shí)如此,這些偏門、細(xì)碎的內(nèi)容,鮮少有人會(huì)去留意和思考。因此我在寫下這些分享內(nèi)容時(shí)期望可以達(dá)到目標(biāo)是:“冷知識(shí)雖然冷,但有用”。用我了解的這些表單設(shè)計(jì)冷知識(shí):?jiǎn)l(fā)你的冷思維、引出你的熱思考。
話不閑聊,我們開(kāi)始討論第一個(gè)問(wèn)題。
有個(gè)表單細(xì)節(jié)不知道你有沒(méi)有想過(guò),標(biāo)簽?zāi)┪彩欠褚用疤?hào)?
這個(gè)問(wèn)題在我前團(tuán)隊(duì)發(fā)生過(guò)激烈爭(zhēng)論,有同事說(shuō):“不要加,占用間距,而且沒(méi)人會(huì)留意它……”,也有人說(shuō):“要加,從含義上講,冒號(hào)的作用就是提示上下文或總結(jié)上下文的停頓。加上之后能更好表示標(biāo)簽與輸入域的關(guān)聯(lián)…….”。
聽(tīng)起來(lái)好像都有些道理,那到底誰(shuí)更對(duì)呢!
首先,我們追溯一下 Web 發(fā)展史,早期可訪問(wèn)性核對(duì)清單中通常堅(jiān)持要標(biāo)簽帶冒號(hào),因?yàn)槠聊婚喿x器一度必須依賴各種技巧才能理解標(biāo)記不明的表單。
而隨著技術(shù)發(fā)展,Web表單使用“l(fā)abel”標(biāo)簽(tag)可以做正確的標(biāo)記,那么屏幕閱讀器就能通過(guò)標(biāo)記(markup)把標(biāo)簽(label)和相應(yīng)的字段對(duì)應(yīng)起來(lái)則無(wú)需再借助冒號(hào)。
不過(guò)在客戶端又有些意外!曾經(jīng) Windows Vista 指南中明確要求使用冒號(hào), Mac Aqua 也有此要求但規(guī)則會(huì)稍靈活一些。
這種情況是因?yàn)槟承┣闆r下屏幕閱讀器在桌面環(huán)境與可閱讀源代碼的網(wǎng)頁(yè)標(biāo)記相比會(huì)遇到一些困難,桌面環(huán)境不會(huì)直接顯示代碼。也是這個(gè)歷史原因,造成 Vista 和 Aqua 各自都有大量其標(biāo)簽包含冒號(hào)的歷史表單。因?yàn)閷?shí)在沒(méi)有必要把它們?nèi)扛牡簦钡浇裉炜蛻舳说谋韱我琅f延續(xù)這一規(guī)則。
通過(guò)Web發(fā)展史我們明白表單標(biāo)簽帶冒號(hào)的產(chǎn)生是為了解決早期屏幕閱讀器的識(shí)別,如今的屏幕閱讀器技術(shù)已轉(zhuǎn)變?yōu)樽R(shí)別標(biāo)簽的底層代碼,無(wú)需借助這種形式了。所以從這點(diǎn)來(lái)看要求標(biāo)簽帶冒號(hào)已經(jīng)站不住腳了。
那從情感角度分析標(biāo)簽帶冒號(hào)的是否對(duì)用戶體驗(yàn)有影響呢?
回到最開(kāi)始,我和同事們的爭(zhēng)論……
先簡(jiǎn)單說(shuō)下答案,無(wú)任何影響!
在《Web表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁(yè)表單》中,作者(卡羅琳·賈雷特)曾經(jīng)做過(guò)大量的表單測(cè)試,最終證明從未有一名用戶談?wù)撁疤?hào)是否出現(xiàn),即使是有些在其他環(huán)境中很介意標(biāo)點(diǎn)符號(hào)的人似乎在線上表單中也未曾注意到。
從以上兩個(gè)角度不難發(fā)現(xiàn),無(wú)論是從技術(shù)發(fā)展還是情感體驗(yàn),都證明可不必要求表單帶冒號(hào);因?yàn)榭捎眯栽L問(wèn)清單不再有這樣的要求,用戶研究也證明幾乎沒(méi)有人會(huì)留意表單冒號(hào)是否出現(xiàn)。
這樣的結(jié)論,看似表單帶冒號(hào)是失敗了……但這并不妨礙它作為一種習(xí)慣或傳統(tǒng)延續(xù)至今,無(wú)論在客戶端還是Web設(shè)計(jì)系統(tǒng)中仍然常見(jiàn)。例如:蘋果電腦的Mac系統(tǒng),國(guó)內(nèi)阿里的Ant Design Web設(shè)計(jì)系統(tǒng)。
因此,得到以下幾點(diǎn)建議:
在表單中標(biāo)簽與表單域的對(duì)齊方式,如果你的團(tuán)隊(duì)已有明確的規(guī)范和使用場(chǎng)景,你只要拿來(lái)主義即可。可如果某天由你主導(dǎo)定義一個(gè)新的表單規(guī)范時(shí),不知道你會(huì)不會(huì)重新考慮哪種標(biāo)簽對(duì)齊方式更好,怎樣區(qū)分使用場(chǎng)景!
通過(guò)科學(xué)實(shí)驗(yàn)發(fā)現(xiàn),無(wú)論是在眼動(dòng)儀的熱圖,還是在許多可用性測(cè)試的觀察結(jié)果中,用戶在填寫網(wǎng)頁(yè)表單時(shí)視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會(huì)落到輸入框的右側(cè),甚至都不會(huì)瞟上一眼。
以此為基礎(chǔ),我們?cè)诰W(wǎng)頁(yè)表單設(shè)計(jì)中有3種最常見(jiàn)的標(biāo)簽對(duì)齊方式:頂對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽和左對(duì)齊標(biāo)簽。你可能會(huì)說(shuō)還有混合對(duì)齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽等,這些確實(shí)存在但并不是最核心的幾種對(duì)齊方式,它們基本是在這3種形式上變化,不脫離本質(zhì)。
下面我們逐個(gè)分析一下。
馬泰奧·彭佐從2006年7月進(jìn)行眼動(dòng)研究發(fā)現(xiàn),從標(biāo)簽移動(dòng)到輸入框只需50毫秒。比左對(duì)齊標(biāo)簽快了10倍,后者需要500毫秒;比右對(duì)齊標(biāo)簽方式快2倍,后者高達(dá)240秒。能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一,是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。
1)優(yōu)勢(shì)
最利于減少表單填寫時(shí)間(標(biāo)簽和輸入框位置最為靠近);用戶視線固定,動(dòng)線一直向下(清晰的完成路徑);節(jié)省大量橫向空間(可用于以多種方式組合的相關(guān)輸入框)。
2)劣勢(shì)
占用額外的垂直空間(如果可提供使用的垂直屏幕空間較小,應(yīng)當(dāng)謹(jǐn)慎使用頂對(duì)齊標(biāo)簽);建議使用輸入框50%至75%的高度作為相鄰輸入框間距。
3)適用場(chǎng)景
希望用戶快速填寫表單,完成任務(wù);同時(shí),當(dāng)輸入項(xiàng)存在主次之分時(shí),對(duì)標(biāo)簽擴(kuò)展性要求高。
如果要盡量減少表單占用垂直屏幕空間,右對(duì)齊能提供快速完成時(shí)間。馬泰奧·彭佐的眼動(dòng)研究發(fā)現(xiàn),專家用戶和新手用戶掃視(眼睛運(yùn)動(dòng))右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在170毫秒和240毫秒,而填寫完成時(shí)間比左對(duì)齊快2倍。
1)優(yōu)勢(shì)
標(biāo)簽與輸入框相鄰(方便快速填寫)。
2)劣勢(shì)
右對(duì)齊布局造成左側(cè)不齊,影響了快速游覽表單的效率問(wèn)題;若標(biāo)簽文字寬度變寬,右對(duì)齊還存在靈活度問(wèn)題。
3)適用場(chǎng)景
既要減少垂直空間,又要加快填寫速度的場(chǎng)景。
在頂、右、左三種方案中,左對(duì)齊表單填寫速度最慢。因?yàn)樽髮?duì)齊表單解析問(wèn)題時(shí)眼球定位次數(shù)最多,用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來(lái),只是花費(fèi)時(shí)間較長(zhǎng)。根據(jù)馬泰奧·彭佐的研究,典型掃視時(shí)間為500毫秒,很長(zhǎng)說(shuō)明用戶經(jīng)歷了沉重的認(rèn)知壓力。
1)優(yōu)勢(shì)
容易游覽標(biāo)簽;占用垂直空間較少。
2)劣勢(shì)
標(biāo)簽和輸入框的相鄰間距增大;適合于用戶不熟悉表單要收集的數(shù)據(jù)或問(wèn)題無(wú)法分成易處理的內(nèi)容組,左對(duì)齊標(biāo)簽游覽表單問(wèn)題會(huì)更容易。用戶只要上上下下閱讀標(biāo)簽左欄,不會(huì)被輸入框打斷。
3)適用場(chǎng)景
表單中存在較多的復(fù)雜或敏感信息,希望用戶放慢速度、仔細(xì)思考(在一些注冊(cè)類表單中較多使用)。
單從效率角度看,頂對(duì)齊標(biāo)簽>右對(duì)齊>左對(duì)齊,但是根據(jù)應(yīng)用場(chǎng)景,效率快并不是我們選擇標(biāo)簽對(duì)齊方式的唯一的指標(biāo)。
因此,得到以下幾點(diǎn)建議。
如果你希望用戶放慢速度,仔細(xì)思考表單中每個(gè)表單項(xiàng),左對(duì)齊標(biāo)簽是個(gè)好選擇,特別是含有大量可選輸入框或高級(jí)設(shè)置的陌生數(shù)據(jù)時(shí)。
而頂對(duì)齊標(biāo)簽在一些國(guó)際化產(chǎn)品的表單設(shè)計(jì)時(shí),會(huì)有更好的延展性。
至于,右對(duì)齊標(biāo)簽雖然與表單域聯(lián)系緊密,便于用戶填寫,但是要考慮好標(biāo)簽的長(zhǎng)短不齊如何解決。能否精簡(jiǎn)標(biāo)簽內(nèi)容,以及確定好表單與界面的邊距。
許多表單設(shè)計(jì)中,有個(gè)常見(jiàn)問(wèn)題:是否應(yīng)該標(biāo)記必填字段?如果表單中的大多數(shù)字段或全部都是必填的,我們是否仍然應(yīng)該標(biāo)記它們?
先簡(jiǎn)單回答:是肯定的,用戶有時(shí)需要通過(guò)必填標(biāo)記來(lái)評(píng)估工作量,了解輸入信息量的最低限度。我會(huì)在下面具體解釋原因。
通常,設(shè)計(jì)師會(huì)覺(jué)得每個(gè)必填字段都有一個(gè)標(biāo)記是重復(fù)的、丑陋的、占空間,而且干擾界面,甚至可能看起來(lái)很擾亂(有認(rèn)知負(fù)擔(dān)!)。因此通常采取以下一種或兩種策略:
1)用戶一般不喜歡閱讀表單頂部說(shuō)明。不難想象,用戶不太可能閱讀表單頂部的說(shuō)明。表單字段需要自給自足,畢竟,每個(gè)字段都有特定指令——它的標(biāo)簽,為什么用戶需要閱讀其他任何東西來(lái)填寫它呢?
2)即使用戶閱讀了說(shuō)明,也可能忘記。你可能會(huì)說(shuō):用戶閱讀了頂部的說(shuō)明,怎么就會(huì)忘記——這么簡(jiǎn)單的事情?
的確容易忘記,特別是當(dāng)表單很長(zhǎng)或填寫表單被打斷時(shí)(這種情況在移動(dòng)端很常見(jiàn))。即使用戶記得,但這占用了工作記憶,增加了認(rèn)知負(fù)荷。換句話說(shuō),你讓用戶完成任務(wù)更難了。填寫表單本身對(duì)用戶來(lái)說(shuō)就相當(dāng)有挑戰(zhàn)性——為什么要讓它更具有挑戰(zhàn)性?
3)用戶必須掃描表單以確定是否為必填字段。不難發(fā)現(xiàn),無(wú)論是否在表單頂部包含說(shuō)明,結(jié)果都可能相同,用戶會(huì)忽略或忘記。他們會(huì)掃視表單,找到一個(gè)標(biāo)記為必填或可選的標(biāo)識(shí)。
而且有些用戶甚至不會(huì)費(fèi)心去環(huán)顧四周,他們只會(huì)做出假設(shè)。他們會(huì)想——“嗯,郵箱——不需要我的郵箱吧?先空著呢”。即使用戶沒(méi)有留空,也不得不暫停來(lái)思考一個(gè)字段是否需要填寫,減慢交互速度并使過(guò)程看起來(lái)更長(zhǎng)、更乏味。
想要解決以上問(wèn)題很簡(jiǎn)單:標(biāo)記所有必填字段。盡量明確和清晰展示每個(gè)必填字段,并標(biāo)記它。當(dāng)然,就像有些設(shè)計(jì)師所說(shuō):界面出現(xiàn)大量必填標(biāo)識(shí)(紅色星號(hào)*)確實(shí)會(huì)增加視覺(jué)噪聲。甚至重復(fù)的星號(hào) * 會(huì)帶來(lái)一些認(rèn)知恐慌。但相比之下,兩害取其輕,這些負(fù)面因素是輕微的。
這里包含至少有兩種方式:星號(hào)*(紅色)和“必填”提示。星號(hào)*在網(wǎng)頁(yè)上已經(jīng)很常見(jiàn),用戶熟悉其含義。優(yōu)點(diǎn)是它不占用太多空間,也看起來(lái)與標(biāo)簽文字足夠不同,所以使用它。
可以使用其他標(biāo)記形式嗎?當(dāng)然可以,但是最好遵循市面上常見(jiàn)的形式(雅各布定律),這樣更符合用戶認(rèn)知。
星號(hào)應(yīng)該在字段標(biāo)簽之前還是在字段標(biāo)簽之后?
這不一定有實(shí)際影響,但將其放在標(biāo)簽之前的一個(gè)原因是,只需掃視標(biāo)簽的最左邊字符,就能輕松定位必填哪些字段。
星號(hào)*是一種視覺(jué)標(biāo)記,應(yīng)當(dāng)仔細(xì)考慮表單中的標(biāo)識(shí)位置。標(biāo)識(shí)在標(biāo)簽左邊能指引用戶迅速瀏覽界面,并判斷出必填項(xiàng)。如果在右側(cè)由于輸入框形式、長(zhǎng)度各不相同,標(biāo)識(shí)和輸入框?qū)R會(huì)導(dǎo)致難以瀏覽和判斷。
雖然這不是強(qiáng)制性的,但標(biāo)記可選字段確實(shí)減輕了用戶思考:如果沒(méi)有這個(gè)標(biāo)識(shí),用戶要環(huán)顧四周,并根據(jù)其他標(biāo)記字段推斷該字段是可選的。如果“非必填”在字段標(biāo)簽旁邊,那該任務(wù)會(huì)變得更容易。不描述可選字段,這沒(méi)問(wèn)題,但這樣做會(huì)是一個(gè)很好的額外幫助。
登錄表單很短,一般由兩個(gè)字段組成:用戶名和密碼,這兩個(gè)字段總是必填的。如果使用星號(hào)*,標(biāo)記這些字段的成本很低,并不會(huì)出錯(cuò)。但是,絕大多數(shù)用戶都使用過(guò)很多登錄表單,他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以,在登錄表單中,可以省略這種形式。
而在注冊(cè)表中不標(biāo)記必填字段是危險(xiǎn)的。注冊(cè)表單因產(chǎn)品而異——不同公司在創(chuàng)建帳戶時(shí)需要不同類型的信息。它不僅僅包含用戶名和密碼,所以請(qǐng)標(biāo)記所有必填字段(包括用戶名和密碼)。
因此,提出以下幾點(diǎn)建議。
基礎(chǔ)前提,盡量去除任何不需要回答的問(wèn)題,特別是涉及到用戶隱私的內(nèi)容。可以更容易讓用戶填完表單。
為了增加表單填寫的機(jī)會(huì),請(qǐng)盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問(wèn)題,但標(biāo)記必填字段(以及可選字段)是最容易的方法之一。
先給出答案:這是肯定的!
在《選擇的悖論》一書中,作者巴里·施瓦茨討論了生活中選擇過(guò)多的影響。并提出策略應(yīng)付無(wú)處不在的過(guò)多選擇。他特別敘述了智能默認(rèn)的能量——即在滿足多數(shù)人需要的地方放置選擇——來(lái)幫助人們做出明智的選擇。
而在Web表單中也有很多地方能利用智能默認(rèn)減少不必要的選擇次數(shù)或輸入,加速表單完成過(guò)程。所以,只要合適就在表單域中預(yù)先為用戶填寫你認(rèn)為他們想要的輸入值。
通過(guò)提供合理的默認(rèn),能有效節(jié)省用戶時(shí)間,就是這么簡(jiǎn)單。應(yīng)用分擔(dān)了用戶思考或輸入答案的工作。填寫表單永遠(yuǎn)不是一件有趣的事情,如果這個(gè)模式能把表單填寫的時(shí)間減少一半,用戶會(huì)非常感激。
你可能會(huì)問(wèn):默認(rèn)值不是用戶想要的,誤導(dǎo)用戶怎么辦?
在設(shè)計(jì)有默認(rèn)值的表單域時(shí),你要思考默認(rèn)值是否是大多數(shù)用戶可以接受的答案,如果不確信可以先去做一下用戶調(diào)研,了解用戶的心聲。
就算默認(rèn)值真的不是用戶想要的,至少你也為他提供了一個(gè)示例來(lái)告訴用戶答案應(yīng)該是什么樣子的。這一點(diǎn)也可以節(jié)省用戶幾秒的思考時(shí)間——或避免一條錯(cuò)誤信息。
但并不代表所有的表單域都要給出默認(rèn)值,我們只是盡可能的讓用戶節(jié)省時(shí)間。
如何使用:
在第一次向用戶顯示表單時(shí),用一個(gè)合理的默認(rèn)值預(yù)先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應(yīng)用的信息來(lái)動(dòng)態(tài)地給出默認(rèn)值(例:通過(guò)身份證自動(dòng)識(shí)別出生日期;利用郵編,推導(dǎo)出對(duì)應(yīng)省/市)。
如果只是因?yàn)槟阌X(jué)得不應(yīng)該留下空白的輸入域,那么不要使用默認(rèn)模式。只有當(dāng)你有理由確信絕大部分用戶,在絕大多數(shù)情況下,不會(huì)修改這個(gè)取值時(shí)才提供默認(rèn)值——否則,這將會(huì)給用戶帶來(lái)額外的工作!
有一個(gè)容易被忽視但實(shí)則舉重若輕的問(wèn)題,表單中輸入框?qū)挾热绾卧O(shè)定?
在表單設(shè)計(jì)中,對(duì)于 Checkbox、Radio 等控件,很明確必須跟隨內(nèi)容自適應(yīng)處理。但對(duì)于Input、Select等你會(huì)不會(huì)產(chǎn)生困惑,是定寬處理還是跟隨內(nèi)容更好。
不知道你是否試圖這么理解過(guò)?輸入框作為用戶填寫信息的主要方式,其表現(xiàn)形式是否可以提供給用戶填寫表單的有用線索。
唐納德·諾曼的著作《設(shè)計(jì)心理學(xué)》中詳細(xì)講解過(guò)心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。
在真實(shí)場(chǎng)景中,大部分輸入框是存在理想長(zhǎng)度的,那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來(lái)減輕判斷負(fù)擔(dān)。
下圖就是典型案例,一個(gè)實(shí)際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理,反而容易誤導(dǎo)用戶對(duì)輸入金額的判斷,造成一種不安全感。
表現(xiàn)形式要為用戶填寫提供有用線索,采用不同長(zhǎng)度的文本框提供了暗示;這種暗示是一種有用線索,當(dāng)輸入框長(zhǎng)度長(zhǎng)短不定時(shí),用戶會(huì)很自然地思考為什么這樣;填寫輸入框時(shí)會(huì)自然考慮這些線索。
請(qǐng)注意!保證暗示效果的同時(shí),不要設(shè)定太多的寬度,反而會(huì)讓表單顯得凌亂;太少又會(huì)讓表單看起來(lái)都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。
什么是模度值和數(shù)量呢!
落在具體設(shè)計(jì)上要先梳理產(chǎn)品中常見(jiàn)的表單類型,然后設(shè)置一個(gè)默認(rèn)寬度。以此為基礎(chǔ)來(lái)有規(guī)律的增加長(zhǎng)度,并考慮清楚它們的適用場(chǎng)景;從而定義出不同的模度,最終制定出整潔有序的模度規(guī)范。這樣就可以讓一線的設(shè)計(jì)師們跳過(guò)部分繁瑣磨人的細(xì)節(jié)思考,快速搭建出合適的表單寬度并合理有效。
本篇文章更多是從表單設(shè)計(jì)中的一些冷門內(nèi)容,即易忽略的一些設(shè)計(jì)點(diǎn)在展開(kāi)討論,利用問(wèn)題加案例的形式對(duì)表單設(shè)計(jì)進(jìn)行剝離拆解,沒(méi)有系統(tǒng)地、成本成套的來(lái)分析表單的構(gòu)成和交互細(xì)節(jié)等等。因?yàn)檫@類內(nèi)容講的人太多了,我也認(rèn)為講的要比我精彩。
所以,我把講的內(nèi)容稱為“私房菜”,更多是我總結(jié)了日常工作中會(huì)遇到的表單設(shè)計(jì)疑問(wèn)和思考,幫助大家換一個(gè)口味來(lái)品味表單設(shè)計(jì),大家可結(jié)合文章中給出的建議作為參考去靈活應(yīng)用。
同時(shí),我也希望能夠通過(guò)這篇文章給到大家更多的啟發(fā)。內(nèi)容如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方還望大家給與指正。
作者:百度MEUX,百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心,負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)
本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。