【iOS設(shè)計(jì)規(guī)范】UI設(shè)計(jì)基礎(chǔ)

為iOS而設(shè)計(jì)


iOS要體現(xiàn)以下幾點(diǎn)原則:

·服從內(nèi)容

UI本身就是為了幫助用戶理解內(nèi)容缨恒、與內(nèi)容互動(dòng)的霹抛,千萬不要喧賓奪主搓逾。

·明確

文本不管任何大小,都要確鄙涎祝可讀性恃逻;Icon要精致并且清晰雏搂;其他修飾要恰到好處。我們要聚焦在基于功能的設(shè)計(jì)上寇损。

·深度

可視化界面和模擬現(xiàn)實(shí)的操作息裸,可以無形中形成產(chǎn)品的生命力胧奔,使產(chǎn)品更有情趣哆姻,并且使用戶對(duì)產(chǎn)品的理解更加深刻优俘。

天氣

不管你是在重新設(shè)計(jì)一個(gè)舊版應(yīng)用,或是正在創(chuàng)造一個(gè)全新的應(yīng)用浊吏,如果用以下方式考慮你接下來的工作而昨,將會(huì)對(duì)你有很大幫助:

·首先,確認(rèn)APP的核心功能以及核心功能之間的聯(lián)系找田;

·其次歌憨,用上面提到的原則來覆蓋UI和用戶體驗(yàn)的設(shè)計(jì)。細(xì)節(jié)和輔助功能的使用要十分小心墩衙,千萬不要平白無故地亂加务嫡;

·最后,確保你的UI設(shè)計(jì)能適配不同的設(shè)備漆改、不同的模式心铃。這樣,你的用戶才能在盡可能多的場(chǎng)景下使用你的APP挫剑。

通過這些過程去扣,你要做好無視一切先例、問題和假設(shè)的心理準(zhǔn)備樊破,一定要聚焦在內(nèi)容上愉棱,并且通過功能來驗(yàn)證你的每一個(gè)設(shè)計(jì)決策。

服從內(nèi)容

雖然好看的界面和流暢的交互對(duì)于iOS體驗(yàn)來說捶码,是一個(gè)亮點(diǎn)羽氮,但是用戶的內(nèi)容始終都是設(shè)計(jì)核心或链。

這里有幾種方法惫恼,用來幫助你提升功能的表達(dá),并且更好地服從內(nèi)容澳盐。

天氣

合理利用整個(gè)屏幕空間

“天氣”這個(gè)APP是個(gè)很棒的例子:優(yōu)雅地祈纯、全屏地描述當(dāng)?shù)禺?dāng)前的天氣狀況,當(dāng)然這也是需要表達(dá)的最重要的信息叼耙。再加上額外的空間腕窥,來展示每小時(shí)的天氣變化。

地圖

重新思考可視化圖標(biāo)的設(shè)計(jì)筛婉,來表達(dá)現(xiàn)實(shí)意義

斜面簇爆、漸變癞松、投影,這些有時(shí)候會(huì)讓UI元素看起來很重入蛆,甚至可能蓋過了內(nèi)容响蓉。因此,我們應(yīng)該關(guān)注內(nèi)容哨毁,并且讓UI作為輔助枫甲。

控制中心

利用半透明的UI元素,來暗示用戶扼褪,后面還有其他內(nèi)容

半透明元素——例如系統(tǒng)的控制中心——提供了一種場(chǎng)景的表達(dá)方法想幻,可以馬上暗示用戶“喏,你看這背后還有東西呢”话浇。在iOS脏毯,一個(gè)半透明元素,僅在被它遮蓋住的地方幔崖,對(duì)背后的圖像做了模糊(見上圖)——像是透過糯米紙去看東西一樣——但是屏幕中沒有被半透明元素遮蓋的部分抄沮,是不做模糊的。

提供明晰的表達(dá)

要求提供明晰的表達(dá)岖瑰,再一次說明了內(nèi)容才是你APP的核心叛买。這里提供幾種方法,幫助你更清楚蹋订、更簡(jiǎn)單地與重要內(nèi)容互動(dòng)率挣。

短信

充分利用留白(原文是negative space,這里還沒琢磨出來怎么翻譯的好露戒,求賜教)

留白可以使重要內(nèi)容或功能椒功,看起來更引人注目并且容易理解。留白也可以傳達(dá)出一種冷靜智什、安寧的感覺动漾。這可以使你的APP看起來更加聚焦和高效。

備忘錄

讓顏色簡(jiǎn)化你的UI

一個(gè)主色——比如備忘錄中的黃色——著重表達(dá)除了重點(diǎn)信息荠锭,巧妙地隱喻了其中的交互旱眯。這也給APP定義了一個(gè)視覺主題。蘋果內(nèi)置的APP用了一系列純色证九,使之與任何其他顏色删豺、明暗背景色中都協(xié)調(diào)搭配。

郵箱

利用系統(tǒng)字體來確崩⒘可讀性

San Francisco(iOS系統(tǒng)默認(rèn)字體)配以各種大小呀页,可以自動(dòng)適應(yīng)文字空間以及行高。這樣文本無論是在哪個(gè)尺寸下拥坛,都會(huì)看起來簡(jiǎn)單易讀蓬蝶。無論你正在用的是San Francisco字體或是其他字體尘分,一定要確保它可以適應(yīng)各種大小。只有這樣丸氛,用戶在使用你的APP時(shí)音诫,采用了一種不同的大小的字體時(shí)才不會(huì)出現(xiàn)問題。

聯(lián)系人

推崇無邊框按鈕

默認(rèn)所有Bar上的按鈕都是無邊框的雪位。在內(nèi)容區(qū)域竭钝,一個(gè)無邊框按鈕可以利用文本、色彩雹洗、和一個(gè)引起點(diǎn)擊的文案香罐,可以暗示交互喻意。如果這樣行得通时肿,一個(gè)內(nèi)容區(qū)域的按鈕可以用細(xì)邊框或者有色的背景來使之凸顯庇茫。

利用深度來溝通

iOS通常利用圖層和位置的不同,來表達(dá)不同層級(jí)的內(nèi)容螃成。這樣也有利于用戶更好地理解同一屏幕中不同元素之間的關(guān)系旦签。

3D Touch的場(chǎng)景

在一個(gè)支持3D Touch的設(shè)備上,輕按寸宏、重按宁炫、快速滑動(dòng)可以讓用戶在不退出當(dāng)前場(chǎng)景的前提下,直達(dá)重要功能氮凝。

桌面文件夾

文件夾通過半透明的背景羔巢,懸浮在主頁之上,來把文件夾里面的內(nèi)容同主頁的其他內(nèi)容區(qū)分開來罩阵。

提醒事項(xiàng)

提醒事項(xiàng)這個(gè)APP通過不同的圖層展示不同的表單竿秆,如圖。當(dāng)你需要操作其中一個(gè)表單的時(shí)候稿壁,其他表單將會(huì)聚集在屏幕底部幽钢。

日歷

日歷強(qiáng)化的過渡動(dòng)畫的表現(xiàn)形式,來給予用戶一種強(qiáng)烈的層級(jí)以及深度的感覺傅是,讓他們明確知道當(dāng)前是在年匪燕、月、日之前切換落午。在表達(dá)“年”的界面中谎懦,用戶可以馬上識(shí)別出今天的日期肚豺,并且操作其他根據(jù)日歷的任務(wù)溃斋。

日歷

當(dāng)用戶選擇了其中一個(gè)月份,年份的視圖將會(huì)合起吸申,月份的視圖展開梗劫。當(dāng)天的日期用高亮的方式標(biāo)記出來享甸,而年份,在“返回”的位置展示梳侨。這樣蛉威,用戶可以清楚地知道,此時(shí)此刻ta正在瀏覽的是APP的哪個(gè)部分走哺,上一步是什么蚯嫌,以及如何返回上一步。

日歷

當(dāng)用戶選擇某一天的時(shí)候丙躏,將會(huì)看到一個(gè)小小的過渡動(dòng)畫择示,月份的視圖將會(huì)裂開,并將本周的日期推到頂部晒旅,下面呈現(xiàn)出選中當(dāng)天的小時(shí)視圖栅盲。利用每一個(gè)過渡動(dòng)畫,日歷這個(gè)APP將年份废恋、月份谈秫、日期的層級(jí)關(guān)系強(qiáng)化了。


原文鏈接:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鱼鼓,一起剝皮案震驚了整個(gè)濱河市拟烫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌迄本,老刑警劉巖构灸,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異岸梨,居然都是意外死亡喜颁,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門曹阔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來半开,“玉大人,你說我怎么就攤上這事赃份〖挪穑” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵抓韩,是天一觀的道長(zhǎng)纠永。 經(jīng)常有香客問我,道長(zhǎng)谒拴,這世上最難降的妖魔是什么尝江? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮英上,結(jié)果婚禮上炭序,老公的妹妹穿的比我還像新娘啤覆。我一直安慰自己,他們只是感情好惭聂,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布窗声。 她就那樣靜靜地躺著,像睡著了一般辜纲。 火紅的嫁衣襯著肌膚如雪笨觅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天耕腾,我揣著相機(jī)與錄音屋摇,去河邊找鬼。 笑死幽邓,一個(gè)胖子當(dāng)著我的面吹牛炮温,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牵舵,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼柒啤,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了畸颅?” 一聲冷哼從身側(cè)響起担巩,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎没炒,沒想到半個(gè)月后涛癌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡送火,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年拳话,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片种吸。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡弃衍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坚俗,到底是詐尸還是另有隱情镜盯,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布猖败,位于F島的核電站速缆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏恩闻。R本人自食惡果不足惜艺糜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧倦踢,春花似錦送滞、人聲如沸侠草。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽边涕。三九已至晤碘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間功蜓,已是汗流浹背园爷。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留式撼,地道東北人童社。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像著隆,于是被迫代替她去往敵國(guó)和親扰楼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容