從最初進(jìn)入電子設(shè)備領(lǐng)域，旋鈕和刻度盤的由最初的功能性設(shè)計(jì)轉(zhuǎn)變?yōu)闀r(shí)尚的外觀設(shè)計(jì)元素，比如在移動(dòng)app中。

這種轉(zhuǎn)變并意外，旋鈕和刻度盤不需要占用移動(dòng)設(shè)備的太多空間，并可以簡單地為用戶提供一些列的參數(shù)和數(shù)據(jù)。旋鈕和刻度有著先天觸屏友好型的外觀，方便開發(fā)者在其中添加多項(xiàng)功能，可以給用戶審美上的愉悅和真實(shí)世界中的協(xié)調(diào)感。

以下列出的是一些很不錯(cuò)的設(shè)計(jì)案例，不過這次推薦的都是圓形的旋鈕，我們也剛好看看同樣一個(gè)功能組件上不同的設(shè)計(jì)風(fēng)格和效果。

Braun radio app by Nicklas Alejandro：奶油色讓app的界面看起來非常平滑文雅。音量旋鈕有少許漸變和微妙的陰影。

Radio app for iPhone by Sebastian Zetko：溫柔的懷舊氛圍，微妙的草書字體以及平滑的玻璃儀表盤。

myTransistor by Alejandro Rao：復(fù)古外觀，用于著重表現(xiàn)工業(yè)革命早期科技的蒸汽朋克設(shè)計(jì)，猛烈的抓痕，綠色的拋光背景以及搶眼的老式收音機(jī)式旋鈕。

Music iOS app by Sylvester Wilmott：與前邊幾個(gè)列子剛好相反，這個(gè)設(shè)計(jì)極為精細(xì)，現(xiàn)代化的外觀充分體現(xiàn)了仿真設(shè)計(jì)。

Music player and voice recorder interface by Zsolt Baritz：強(qiáng)烈依賴現(xiàn)實(shí)主義的設(shè)計(jì)風(fēng)格，將玻璃光澤效果、紋理以及字體很好地融為一體。中央旋鈕和開關(guān)、刻度盤看起來都非常棒。

Mixer elements by Uriel Albarran O：圓滑的精確的黑色外觀，占據(jù)大量空間的主按鈕給人愉悅舒適的感覺。

Bikester mine v.2 by Michael Sambora：用紅色、綠色和白色有效地組織了大量數(shù)據(jù)。

Radio by Terrence：很好地平衡了金屬按鈕和扁平面板。整潔清爽的圖標(biāo)，字體以及頭部的動(dòng)態(tài)紋理傳達(dá)了簡潔清晰的外觀。

Close Up by arjun/aj：這是一個(gè)優(yōu)雅的收音機(jī)app設(shè)計(jì)，有著整齊美觀優(yōu)雅的外觀。旋鈕上的彩色進(jìn)度條躍然而出，其余背景則采用了扁平化的元素。

Extra Cold Finder iOS by Emile Rohlandt：用淡灰和藍(lán)色打造了平靜中透露著活躍的氛圍。

Air conditioning controller by Kingyo xie：現(xiàn)代化的極簡設(shè)計(jì)風(fēng)格，珊瑚紅和白色自然融合。稍有凸出效果的旋鈕搭配著設(shè)計(jì)精妙的進(jìn)度條。

Groove! Simple metronome App by Tom Reinert：平滑的黑色界面，略帶噪點(diǎn)效果中滲入了躍動(dòng)的藍(lán)色。

Retro Caller by Zsolt Baritz：模仿老式電話設(shè)計(jì)的界面，巧妙地運(yùn)用了金屬撥號(hào)鍵盤，帶來了濃濃的復(fù)古氣息。

Infiniti iPhone App by Muhsin Abdul Sathar：謹(jǐn)慎黑和鮮亮紫的優(yōu)雅搭配，一是為了對(duì)所有的圖形元素負(fù)責(zé)，二是突出中間的旋鈕、字體以及圖標(biāo)。

SeaStatus iOS App by Ian Mesa：把整潔、優(yōu)雅以及充滿活力的加速設(shè)計(jì)融合在扁平化設(shè)計(jì)當(dāng)中。

Gas combi remote control app by Ali O：干凈清晰的界面，有冷色和大量自由空間營造出了微涼的感覺。微妙的陰影和光滑的漸變塑造了三維的視覺效果。

Celia’s Weather by Celia Sun：一個(gè)天氣類app的UI設(shè)計(jì)，用亮色沖淡了整體透露出的嚴(yán)謹(jǐn)嚴(yán)肅。

Remote by Caspian Ievers：簡約中彰顯著現(xiàn)代和雅致的設(shè)計(jì)感。設(shè)計(jì)師用屏幕的中間部分來展示了一個(gè)凸起的多彩旋鈕。

Old Futuristic Radio by Tobia Crivellari：真實(shí)的仿真界面和控件。

Music Player App by Emile Rohlandt：暗色的UI，整體時(shí)尚簡約，同時(shí)有一個(gè)閃亮的旋鈕。

Music Player App by Revival Pixel：美妙的金色和有著金屬光澤的旋鈕透出了暖暖的感覺。

Alarm Clock App by Samuel Bednár：帶有metro風(fēng)格的美學(xué)設(shè)計(jì)，很好地整和了圖形和導(dǎo)航項(xiàng)目。

T3 Player App：體現(xiàn)了設(shè)計(jì)大師 Dieter Rams鮮明簡約的設(shè)計(jì)風(fēng)格，將Dieter Rams的經(jīng)典作品–博朗T3口袋收音機(jī)—搬到了iPhone里。細(xì)膩簡約的設(shè)計(jì)讓人仿佛回到了那段黃金時(shí)代。

綜述

旋鈕和刻度盤被廣泛用在音樂播放器和允許用戶自由調(diào)節(jié)參數(shù)范圍的應(yīng)用上，為用戶提供了優(yōu)秀的控件和便利的用戶體驗(yàn)，同時(shí)也為界面設(shè)計(jì)做了很好的補(bǔ)充。

source：Knobs and Dials in Mobile App Interfaces