91欧美超碰AV自拍|国产成年人性爱视频免费看|亚洲 日韩 欧美一厂二区入|人人看人人爽人人操aV|丝袜美腿视频一区二区在线看|人人操人人爽人人爱|婷婷五月天超碰|97色色欧美亚州A√|另类A√无码精品一级av|欧美特级日韩特级

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

真正全面的全面屏系統(tǒng)是怎么做出來的?

小米公司 ? 來源:未知 ? 作者:李倩 ? 2018-07-05 14:29 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

在MIUI10的內(nèi)測反饋中,設計上的耳目一新是眾口稱贊的部分。近日,MIUI設計總監(jiān)Gary和幾位核心設計師一起接受了我們的采訪,開誠布公地介紹了MIUI10設計背后的故事。

MIUI設計團隊

這次的采訪我們聊得很細,細到某一個交互的設計思路的變遷,以及為什么最終是以那種方式呈現(xiàn)在MIUI10之上。我相信,無論你是對設計還是對手機系統(tǒng)存在好奇,一定都可以從這次訪談里得到一些有益的啟發(fā)。因為我們沒聊虛的。

① 徹底干掉虛擬鍵的全面屏手勢是不是太激進了?

虛擬鍵不該存在

是不是太激進我們還是根據(jù)用戶反饋來判斷,這套手勢因為沒有任何虛擬鍵的提示,剛開始確實需要一兩分鐘來學習,但大部分的用戶反饋是:用了就回不去了。目前從客觀上來講,安卓手機里的全面屏手勢,MIUI確實是最好用的,不是我們自己說,而是從各種用戶反饋、包括微博上很多專業(yè)數(shù)碼博主的反饋得來的結(jié)論,很多人在主動地說這件事。

但是在手勢的設計上,我們是踩過很多坑的。

我們嘗試過很多版本的全面屏手勢,最初還沒有大膽到想干掉所有虛擬鍵,而是想在虛擬鍵上做文章。開始我們覺得那個區(qū)域很多時候3個button可能用不上,比如看書的時候,你可能只需要一個返回鍵,所以我們考慮的是在某些特定的應用場景里把一些用不到的虛擬鍵收起來,這是做減法,減法做完之后,原來虛擬鍵的位置就空出來了,我們覺得這個空間是浪費的,又在想應該怎么利用起來,這是早期一個很復雜的思路。

早期帶橫桿虛擬鍵的產(chǎn)品

后來我們又想是不是可以把3個鍵整合成一個虛擬鍵,當初做了一個Demo,把3個鍵集合成一個橫桿,那個時候還沒有看到iPhone的模型,在iOS的全面屏手勢出來之前,我們就做了一個橫桿子,其實是受Palm的啟發(fā),這根桿子很早之前Palm就有了,蘋果可能也是受Palm啟發(fā)。我們設計的是在那個桿子上橫滑返回,然后上滑回桌面,很接近蘋果目前的處理方式。但最終還是把這個設計給放棄了,去掉的原因是:提示桿一開始是有比較好的引導操作作用,但一段時間后,用戶就不需要了,另外就是視覺感官上橫桿并不好看,工業(yè)設計上好不容易才能把手機下巴縮短幾毫米,你一根橫桿又全給它加回來了,這其實背離了“全面屏”的初衷,在設計上是一種不得已而為之的妥協(xié)。

否定橫桿之后,我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵,就對我們的交互設計提出了很高的要求,首先,這個手勢的出發(fā)點一定得非常符合直覺,所以不管是返回上一級菜單也好,回到桌面也好,這必須是兩個最基礎(chǔ)的操作(橫滑、上滑),在這兩個基礎(chǔ)操作上略做停頓,我們就可以進入應用間的快切和多任務管理,我們用一種非常輕的設計把它附著在兩個基礎(chǔ)交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做,最后做出來反倒更貼近用戶操作手機的直覺,有一種柳暗花明的感覺。

簡潔易用的MIUI全面屏手勢

② MIUI10的整體視覺設計遵循了什么思路?

為全面屏而重新設計

在天氣、日歷、安全中心等等MIUI10的各個角落里,其實都把原來分段式的畫面結(jié)構(gòu)做了一個全面屏化的設計,讓頁面不要有很強的割裂感。讓內(nèi)容直接浮在屏幕上,用戶第一時間得到信息,去掉干擾元素。

在非全面屏時代,手機有上下兩個比較大的黑色邊框,在視覺上天然是分段式的,之前屏幕內(nèi)的多色塊設計其實是對應了手機外觀的這種“分段”,它還是和諧的,但原樣搬到全面屏手機上,就顯得是把一整塊完整的屏幕生生分割成了幾段。

另外就是原來有一些插畫類型的風格和表達手法,想讓整個畫面有一些親和力。但是因為我們的用戶覆蓋面很大,兩三億用戶,會有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代,整個系統(tǒng)應該更成熟、更普適一些,我們更傾向于做一個對任何人來說都很舒服的視覺設計。

③ 這次整體視覺風格有比較大的變動,有沒有什么地方特別花費精力的?

舉個特別細節(jié)的例子。MIUI10的時鐘,有一部分用戶會有疑問:在MIUI10里,可見的大多數(shù)頁面是亮色,為什么進入時鐘時鐘卻是黑色的?我們其實也在白色和黑色反復了很多次,調(diào)研也做了很多次。最終我們認為更重要的是時鐘的使用場景問題,比如說你晚上在睡覺前拿起手機定個鬧鐘,在夜晚或者室內(nèi),從手機桌面進來打開時鐘,如果進入一個很亮的頁面,它即便是好看的,也可能會刺眼。所以我們還是選擇了黑色,當然那個對比度到現(xiàn)在還在調(diào)整,我們想把視覺上的美觀和使用的舒服統(tǒng)一進來。

④ MIUI10的自然音效系統(tǒng)是發(fā)布會上的一個驚喜,你們?yōu)槭裁磿氲饺プ鲆粜В?br />
永不重復的MIUI10通知音效

我明白你這個問題的意思,大部分人的手機是長期靜音的,音效這個東西,好像已經(jīng)被完全忽略了。但是我們覺得,哪怕只有1%的用戶打開了手機鈴聲,他也應該感受到悅耳而不是打擾和膩煩。如果我沒記錯的話,我們是手機廠商里第一個針對音效做系統(tǒng)性設計和優(yōu)化的,我們從“百聽不厭”的自然系音效出發(fā),和得過格萊美獎的頂尖音樂人合作,還針對手機音腔的特性對音效做了特別的優(yōu)化。

發(fā)布會上洪鋒把自然音效系統(tǒng)作為一個彩蛋來講,這是我們送給小米手機用戶的一個禮物,是讓我們驕傲的產(chǎn)品。我不確定有多少用戶會發(fā)現(xiàn)這個產(chǎn)品,有些人可能因為長期靜音他沒有機會接觸到這個新設計,但它是一個能帶給人驚喜和溫暖的東西。

⑤ MIUI的設計理念是什么?

有些人可能會覺得設計是一個偏感性的、依賴審美的的東西,但是對于一個好的系統(tǒng)設計,我會從視覺、動效、交互、字體、音效,五個維度的去衡量它的完善程度。

我們用一個人來做類比。視覺,就是感官層面的,比如說你見到一個人會說:這個人很帥;第二就是交互層面的整體邏輯,就好比你跟他說話,發(fā)現(xiàn)他的腦子清楚;第三就是整個動效的層面,這個人的肢體語言很優(yōu)雅;還有字體,我們是從MIUI8的時候就開始做了,為了讓大家有更好的閱讀體驗,讓人覺得你這個人很有涵養(yǎng),這已經(jīng)深入到非常細節(jié)的層面了;最后,我們加了一個聲音的系統(tǒng),就是你說話的時候,聲音還要好聽。MIUI在設計方面一直是往多個方面進化,我們并不滿足于做出某個漂亮的頁面或者交互,而是追求整個體驗層面的飽滿。

做設計過程中,我們可能會嘗試各種各樣的方案,也有靈光乍現(xiàn)的時刻,但我們會從多個維度完整地去考量這個設計成果,避免做出一些只是“看上去很美”的自嗨的東西。實際看起來、用起來、聽起來怎么樣,我們想從這幾個大的感官維度上都能達到體驗層面的滿足。

舉一個例子:比如說之前我們?yōu)榱丝烊サ袅艘恍┙怄i的動畫,用戶一按指紋解鎖,直接進到桌面,這種確實是非常的快,但這種感覺就像什么呢?就像你一按電梯,門就消失了,你進了電梯,它咔一聲又關(guān)上了,是很快,但是這種觀感是不太好的。它沒有一種歡迎的意識,就只是把東西呈現(xiàn)給你。這一次我們希望把這個東西改回來,當你進入手機桌面的時候,圖標應該有個簡短的優(yōu)雅的動態(tài),有一個進場亮相的過程。

MIUI動態(tài)圖標

MIUI其實已經(jīng)非常流暢了,在這種地方去掉應有的動畫,是可以快100毫秒,但這種快是沒有意義的。讓用戶舒服的看到這個東西,這才是整個體驗的核心。所以我們這次就定下一個目標,和工程團隊一起,把這種為快而快的東西給它削弱,用戶要的是更優(yōu)雅的體驗,而不是那種無感知的快100毫秒。

這個事情說起來不大,但其實是一種理念層面的進步,大家已經(jīng)從那種無意義的純數(shù)據(jù)比拼里解脫出來,更注意到整個體驗層面。我們這次會把上面說的進場動畫加進來,能讓用戶點亮屏幕的時候感覺到更加的舒服,能夠感覺整個系統(tǒng)的“肢體語言”更加優(yōu)雅。

⑥ 對于MIUI11的展望?

之前的非全面屏時代,手機屏幕在16:9的形態(tài)下,UX設計上其實已經(jīng)極度成熟。手機的很多功能和設計的出新,很大程度上都是在迎合一些小眾的需求,可能一部分人覺得很喜歡這個設計,但它并不普適。

全面屏手機的出現(xiàn)又將設計師的注意力從這些小眾需求拉回到了一個大眾需求:怎么在全面屏手機上做出更好的體驗。因為智能手機用戶遲早會將手中的設備換成全面屏設備,手機廠商如果只是簡單地把原來16:9的畫面改成18:9,而不根據(jù)硬件特點做真正的深度定制,那就會離用戶體驗越來越遠。

手機系統(tǒng)的未來我們認為也會是這樣的趨勢,軟硬件的結(jié)合會更加的緊密。在這一點上,MIUI有這個意識,也有行動,目前是走在比較前面的。

MIUI10落版后,我們也在考慮往這個方向去深化。我們不會特意去考慮11跟10之間非得做出什么大的區(qū)別來,相比這個,我們更關(guān)心的問題是:什么是用戶真正需要的設計。

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • MIUI
    +關(guān)注

    關(guān)注

    2

    文章

    302

    瀏覽量

    22420
  • 全面屏
    +關(guān)注

    關(guān)注

    5

    文章

    907

    瀏覽量

    42228

原文標題:“我們不聊虛的”——MIUI10設計背后的故事

文章出處:【微信號:xiaomigongsi0406,微信公眾號:小米公司】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    信捷高清系列觸摸實現(xiàn)顯示性能全面升級

    在工業(yè)生產(chǎn)場景中,畫面顯示不夠清晰、細節(jié)難以辨識,都會直接影響現(xiàn)場監(jiān)控與操作體驗,信捷高清系列觸摸TS3-700H-E/TS2-700H-E實現(xiàn)顯示性能全面升級。以1024*600高分辨率液晶
    的頭像 發(fā)表于 03-06 15:08 ?229次閱讀
    信捷高清系列觸摸<b class='flag-5'>屏</b>實現(xiàn)顯示性能<b class='flag-5'>全面</b>升級

    基于FPGA制作紅外熱成像傳感器,有沒有大佬可以給我提提意見和思路呀

    需要怎么開始,我有這個想法,但不知道該怎么做,有沒有人做出來了,可以說一下是怎么做的嗎? 對設計出的傳感器的要求是,可以對圖像進行分析處理,通過開發(fā)板連接顯示屏幕,測出某個物體的溫度,不知道
    發(fā)表于 10-19 17:52

    水下目標智能識別系統(tǒng)平臺全面解析

    水下目標智能識別系統(tǒng)平臺全面解析
    的頭像 發(fā)表于 10-17 17:09 ?360次閱讀
    水下目標智能識別<b class='flag-5'>系統(tǒng)</b>平臺<b class='flag-5'>全面</b>解析

    電磁干擾自適應抑制系統(tǒng)平臺全面解析

    電磁干擾自適應抑制系統(tǒng)平臺全面解析
    的頭像 發(fā)表于 09-17 16:12 ?680次閱讀
    電磁干擾自適應抑制<b class='flag-5'>系統(tǒng)</b>平臺<b class='flag-5'>全面</b>解析

    電磁兼容與頻譜管理系統(tǒng)平臺全面解析

    電磁兼容與頻譜管理系統(tǒng)平臺全面解析
    的頭像 發(fā)表于 09-16 16:45 ?615次閱讀
    電磁兼容與頻譜管理<b class='flag-5'>系統(tǒng)</b>平臺<b class='flag-5'>全面</b>解析

    電磁脈沖防護系統(tǒng)平臺全面解析(精簡版)

    電磁脈沖防護系統(tǒng)平臺全面解析(精簡版)
    的頭像 發(fā)表于 09-15 17:19 ?1347次閱讀
    電磁脈沖防護<b class='flag-5'>系統(tǒng)</b>平臺<b class='flag-5'>全面</b>解析(精簡版)

    電磁兼容認證管理系統(tǒng)軟件全面解析

    電磁兼容認證管理系統(tǒng)軟件全面解析
    的頭像 發(fā)表于 08-28 15:58 ?791次閱讀
    電磁兼容認證管理<b class='flag-5'>系統(tǒng)</b>軟件<b class='flag-5'>全面</b>解析

    衛(wèi)星圖像智能合成系統(tǒng)全面解析

    衛(wèi)星圖像智能合成系統(tǒng)全面解析
    的頭像 發(fā)表于 08-27 14:49 ?618次閱讀
    衛(wèi)星圖像智能合成<b class='flag-5'>系統(tǒng)</b><b class='flag-5'>全面</b>解析

    電磁干擾抑制系統(tǒng)平臺全面解析

    電磁干擾抑制系統(tǒng)平臺全面解析
    的頭像 發(fā)表于 08-11 15:50 ?993次閱讀
    電磁干擾抑制<b class='flag-5'>系統(tǒng)</b>平臺<b class='flag-5'>全面</b>解析

    通用衛(wèi)星通信模擬仿真系統(tǒng)全面解析

    通用衛(wèi)星通信模擬仿真系統(tǒng)全面解析
    的頭像 發(fā)表于 07-28 09:26 ?765次閱讀
    通用衛(wèi)星通信模擬仿真<b class='flag-5'>系統(tǒng)</b><b class='flag-5'>全面</b>解析

    通用裝備故障診斷系統(tǒng)全面解析

    通用裝備故障診斷系統(tǒng)全面解析
    的頭像 發(fā)表于 07-21 09:48 ?599次閱讀
    通用裝備故障診斷<b class='flag-5'>系統(tǒng)</b><b class='flag-5'>全面</b>解析

    機場保障能力評估系統(tǒng)軟件全面解析

    機場保障能力評估系統(tǒng)軟件全面解析
    的頭像 發(fā)表于 07-17 22:06 ?533次閱讀
    機場保障能力評估<b class='flag-5'>系統(tǒng)</b>軟件<b class='flag-5'>全面</b>解析

    所以你做出來了嗎

    所以你做出來了嗎,求
    發(fā)表于 06-16 01:43

    電磁數(shù)據(jù)展示系統(tǒng)軟件平臺全面解析

    電磁數(shù)據(jù)展示系統(tǒng)軟件平臺全面解析
    的頭像 發(fā)表于 05-13 10:13 ?779次閱讀
    電磁數(shù)據(jù)展示<b class='flag-5'>系統(tǒng)</b>軟件平臺<b class='flag-5'>全面</b>解析

    電磁脈沖防護系統(tǒng)平臺全面解析

    電磁脈沖防護系統(tǒng)平臺全面解析
    的頭像 發(fā)表于 04-27 16:57 ?1004次閱讀
    電磁脈沖防護<b class='flag-5'>系統(tǒng)</b>平臺<b class='flag-5'>全面</b>解析