<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          UI設計改稿經驗總結

          博博


          UI大課堂 2018-02-01 00:00:39

          提到這個話題有兩層不同的討論方向,在工作中對公司項目進行設計改版和利用業余時間進行自由主題的改版練習。這次我們主要以后者為出發點進行討論,其目的是為了給部分設計師在利用自己業余時間上面探索出一個新的方向。在工作項目中進行UI設計改版分為團隊發起和自我發起,這個我們下一次一起來討論。

          UI設計師的自我提升來源于多方面的綜合體現,工作項目中的實戰經驗、團隊協作的互補學習、項目沉淀與反思、碎片化閱讀的查漏補缺、業余時間的自我驅動、閱讀帶來的知識沉淀等等。如何充分利用自己的業余時間是被很多初入行業的設計師所忽略的,一晃三五年過去了,卻發現自己找不到更多的作品用來豐富簡歷,很快便進入了瓶頸期。

          面對未來的自己可能會出現這樣的情況,我們一起提前探討一下這個話題,以 UI設計改版為突破口展開我們的話題,希望帶給即將入行和剛入行的設計伙伴兒一個新的方向。

          目錄

          1、UI改版的目的,從不做無意義的事情;

          2、制定時間規劃,是為了治療懶??;

          3、如何挑選改版產品,再也不是選“美”了;

          4、體驗,這是你的第一次深度探尋;

          5、功能梳理,理清流程好開工;

          6、競品分析,做好知己知彼;

          7、素材采集,打開禁錮的思維;

          8、體驗,走了一圈才發現你可以更好;

          9、交互設計,實現你心中的更好;

          10、設計風格推導,符合產品的設計趨勢運用;

          11、界面設計,碎片化積累;

          12、審核,尋找導師;

          13、調整優化,不放過任何一個細節;

          14、包裝,整理設計思路;

          15、分享,設計交流。

          正文

          1、UI改版的目的,從不做無意義的事情

          工作中的項目參與對UI設計師的專業提升是非常重要的,由于很多公司都處于高速發展的階段,項目的周期很緊張,都希望每個支援板塊能夠具備更高的效率,推進項目更快的完成迭代上線。在設計板塊,很多成熟的平臺也是愿意花費更高的福利待遇引進資深及以上級別的設計師支持項目的運轉,那么設計師的進階之路便是你在職場中穩中求進的關鍵。

          在真實的場景中,有一部分設計師也存在著以下情況:

          • a. 項目參與度低,沒有更多的機會發揮自己的專業;

          • b. 公司產品迭代緩慢或者視覺支持較小,空余時間較多;

          • c. 沒有機會在項目中嘗試一些新的設計語言;

          • d. 自學 UI 中,沒有真實項目能夠發揮;

          • e. 增強設計效率和產品設計思維等能力。

          如果你擁有以上的情況之一,利用自己的業余時間進行 APP 設計改版將會給你帶來更多的提升空間,不但可以通過練習增強自己的設計效率,也能體驗更加豐富的產品設計。在改版中也能不斷加強一些交互或者產品的思維,可以讓你在以后的工作項目中不局限在視覺層面,具備更多的產品思考,做出更合理的設計。

          UI設計改稿經驗總結

          2、制定時間規劃,是為了治療懶病

          如果你想要改變現狀,也拿出前所未有的熱度值,那就趁熱打鐵吧,制定一份時間表是必須的,千萬別忽略它的重要性,如果你不按照這個時間計劃去推進,可能這個熱度值將會被懶寶寶不斷地熄滅^_^。

          制定時間規劃不僅可以合理的利用好自己的業余時間,也能更好的按照這個規劃表去逐步的推進這次改版項目,把一個大的事項拆分為若干的小事項,每天推進一部分,一次改版設計很快就在不斷的推進中被完成。

          APP 改版時間規劃表大家可根據自己的習慣設置,表格形式還是簡單的文字記錄都可以,進度把控需要結合自身情況而定,確保其有效性。

          UI設計改稿經驗總結

          3、如何挑選改版產品,再也不是選“美”了

          面對應用商城里面海量的 APP 產品,你是否有點不知所措,如果選擇一個自己從來不玩的 APP,改版的時候對產品的服務模式、功能架構、交互邏輯等都是比較陌生的,需要一定的時間進行學習。如果選擇一些大型的產品,由于其自身的設計團隊就是非常的專業,你很難從中發現可以優化的點,即使勉強進行改版,也會發現自己設計得不如原版的好,進而打擊自己的自信心。

          通過上面的分析,我們在挑選改版產品的時候,需要結合自身的一些情況先做出一定的預判,然后再去挑選現階段相對比較符合的產品進行改版練習。

          a. 挑選自己接觸過的直接產品或者間接產品;

          b. 對 APP 里面所提供的產品或者服務比較認可或者沒有一定的排斥感;

          c. 挑選無論是視覺層面還是交互層面都有一定優化空間的產品,別輕易嘗試精品;

          d. 如果身邊有朋友使用過的產品優先考慮,因為可以成為你調研數據的來源;

          e. 選擇陽光積極型的產品,不做傳遞負能量或者違反規定的產品;

          f. 初次嘗試 APP 改版設計,從輕量級的產品入手,可以控制練習時間和自己的駕馭度。

          UI設計改稿經驗總結

          4、體驗,這是你的第一次深度探尋

          當你確定自己改版的 APP 對象以后,我們就開始做一次體驗吧,這是你的第一次深度探尋。體驗情況根據設計師對該產品的熟悉程度而定,你需要通過不斷的進行操作把自己從小白用戶升級到專家級用戶。

          這個過程需要你對產品有一個很深入的了解,不只是熟悉主流程操作邏輯,對一些偏冷門的功能操作也要非常的熟悉,如果是需要注冊使用的產品,一定不要忽略注冊會員以后的體驗。最終達到的級別是你可以向身邊任何一位朋友輕松的進行推薦和演說,能夠通過你的講解讓他輕松地學會使用該產品。

          UI設計改稿經驗總結

          5、功能梳理,理清流程好開工

          當你對改版 APP 進行第一次深度體驗之后,利用思維導圖軟件繪制出整個產品的功能結構圖,思維導圖軟件種類很多,大家自行選擇,我常用的是 MindNode。第一次進行功能梳理無需進行增刪處理,真實還原產品現有功能即可,其目的是整理自家“倉庫”,做到心中有數。

          在進行功能梳理的時候,如果遇到操作復雜的功能需要備注信息,以便自己后期預覽時能夠快速理解其含義。如果是第一次做功能結構圖越詳細越好,這將有助于你充分理解每個功能傳達的含義。

          UI設計改稿經驗總結

          6、競品分析,做好知己知彼

          深度體驗完改版 APP 之后,做了功能結構圖,此時你對所需要改版的 APP 以及這個行業的產品都有一定的認知,此時你再去體驗直接競品和間接競品必然是以一個專家級用戶的水平去探尋。在體驗過程中需要結合改版產品的功能進行對比,可能第一遍體驗無法很好的進行對比,所以需要至少體驗 3 次以上才能很好的得出對比的結論。

          體驗產品時需要注意的幾個維度:

          • a. 不要急于進行總結,先進行至少 3 次以上體驗;

          • b. 先看整體布局再分析局部細節;

          • c. 重點功能交互形式需要提取出來進行對比;

          • d. 主界面的各版塊布局設計需要進行對比;

          • e. 配色分析,作為改版時的配色優化指導;

          • f. 圖標和組件庫的分析,找出細節的優化方向。

          進行競品體驗時,盡可能多的找出差異化的設計形式,作為改版 APP 優化的指導方向。由于作為 UI 設計師進行 APP 改版練習更多是視覺優化為主,交互優化為輔,所以我們需要在相同模塊上面找出更多不同的設計樣式,作為視覺優化的方向。

          如果你自身交互能力較好,也可以以交互優化為主,視覺優化為輔,這個可以結合自身情況選擇。在進行競品體驗的時候也要根據優化目的的不同,著重的轉移體驗的重心。

          UI設計改稿經驗總結

          7、素材采集,打開禁錮的思維

          通過競品體驗你會總結出改版 APP 各個模塊的差異化,相同的功能模塊各自產品的交互形式、布局樣式、視覺風格都存在各自的差異。此時,你對改版 APP 中的很多設計都一個初步的優化清單,你需要再深入一步,因為競品的設計樣式不一定就是值得借鑒的,我們需要尋找更多的靈感,打開自己禁錮的思維。

          通過國內外的一些設計平臺、素材網站等我們可以去采集更多的設計樣式作為靈感借鑒,日常的一個采集收藏習慣也就變得尤為重要了,作為一個優秀的 UI 設計師,我們需要養成這樣的習慣。個人平時經常訪問的設計平臺有站酷、UI中國、致設計、Dribbble、Behance等,采集收藏靈感會經常用Pinterest和花瓣,都是一些大家經常訪問的平臺,所以不是別人知道你所不知的優秀平臺,而是你沒有他的良好習慣。

          UI設計改稿經驗總結

          8、體驗,走了一圈才發現你可以更好

          采集完一些靈感素材之后,我們又回到體驗改版 APP 的起點,走了一圈之后你會發現改版 APP 中很多你可以入手優化的方向,比起第一次體驗,你會更加有信心能夠做出一個不一樣的設計作品。再次進行產品體驗的時候,你需要帶著腦海中處理相同功能板塊的不同設計表現形式進行思考,尋找出更好的設計表現形式來解決這個功能模塊。

          在構思優化樣式的時候,可以繪制一些簡單的草圖,以防后期進行交互輸出的時候遺漏靈感細節。在進行設計優化的時候先從靈感庫中尋找較為符合的樣式進行思維嵌套,然后再發散思維,融入自己原創性的思維,形成自己的原創思路。

          UI設計改稿經驗總結

          9、交互設計,實現你心中的更好

          通過前期的準備工作,我們即將進入重要的設計部分,大家不要忽略前期的準備階段,只有思路成熟且清晰,后面的設計工作才能更加順暢。

          作為 UI 設計師最終輸出的必然是高保真的視覺稿,那么交互原型設計是為了快速的把自己的思路展現出來,所以不局限于原型軟件的繪制,哪怕是紙上的草圖繪制也是可行的方案。最終的交互稿是給自己看的,所以能看懂就能達到最終的目的。

          如果你考慮后期進行作品包裝展示時,希望能展示出交互思維,那你花點時間適當的對低保真交互原型進行繪制也是不錯的選擇,也能鍛煉自己原型制作軟件的操作能力^_^。

          UI設計改稿經驗總結

          10、設計風格推導,符合產品的設計趨勢運用

          在開始進入界面視覺設計時,我們需要對整體 APP 設計做風格推導,這將直接關系著最終界面呈現的效果。如果你是一位對行業趨勢關注的設計師,各種設計趨勢呈現在你腦海中,你需要進行篩選,結合改版產品的屬性選擇合適的設計語言去表達,切不可為了趨勢而犧牲產品定位。

          在進行風格確定的時候,顏色的選擇也占據一定的因素,我們可以選擇改版 APP 現有的主色進行優化,也可以進行推翻重選。如果是重新選擇配色方案,我們可以通過情緒版的方式在身邊朋友或者各種群里進行。也可以與競品形成視覺差異化,選擇一些形成對比的配色方案,方式很多,大家根據自己的條件和思路自行展開。

          確定好配色方案之后,我們需要考慮設計的表現形式,無論是何種設計形式都需要符合產品的屬性。比如大標題、大圓角卡片、大投影等設計表現形式會在視覺層面帶來不錯的效果,卻需要考慮信息量的因素,如果本身改版 APP 就屬于信息量很大的產品,在選擇時就要綜合考慮。根據 APP 的風格定位,比如文藝類、娛樂類、兒童類等,那么設計的風格也會對產品風格定位起到一定的影響。

          UI設計改稿經驗總結

          11、界面設計,碎片化積累

          當你打開設計軟件進行界面設計的時候,剩下的就是“滿血復活”的激情,為了能夠充分利用好業余時間,我們需要把數十個界面分配到具體的日程中,的利用碎片化的時間進行積累。規定自己一天完成兩個界面,就要嚴格執行,只有這樣你才能具備超強的戰斗力。

          提到界面設計很多設計師會糾結在軟件的選擇上面,總會問老司機們你們用什么軟件,其實軟件的選擇并不是問題,它只是一個工具,用的順手即可,現在很多軟件都能帶來最終的目的。隨著很多輕量級的軟件不斷豐富多樣,軟件的操作也更加簡單便捷,只要你充分的利用互聯網資源,軟件的學習只是熟練度的問題,設計的思路與技巧才是需要更多的學習、研究和總結。

          UI設計改稿經驗總結

          12、審核,尋找導師

          歷盡艱辛你收獲了希望,一套 APP 改版設計作品初步完成,接下來你需要尋找到一位導師,俗話說當局者迷,你自己構思出來的東西需要得到驗證,尋找一位資深的設計老司機給你指點作品,將會給你的成長帶來很大的幫助。他們會站在更高的專業角度給你指出一些優化建議,也能使你的作品更加成熟。

          導師在哪里?

          • a. 可以是身邊的同事,別以為導師一定是大神,旁觀者的意見都是具有一定的思考價值;

          • b. 通過一些設計交流群尋求意見,建群的意義其實就是交流設計(可是現在演變為暢談人生了/(ㄒoㄒ)/~~);

          • c. 通過設計平臺尋找那些活躍的老司機,只要是真誠的設計交流,他們都會樂于分享;

          • d. 機緣巧合下加上的大神微信或者QQ,平時要注意不要群發小廣告去騷擾他們,他們關鍵時候會樂于給你專業性的指點;

          • e. 相信你能找到更多的方法,尋求幫助。

          UI設計改稿經驗總結

          13、調整優化,不放過任何一個細節

          通過不同形式的意見反饋,我們即將面臨一次調整優化,在眾多的反饋意見中,我們也不能盲目的進行修改。我們要做有思考能力的設計師,去分析這些修改意見,遇到意見相左的修改建議要結合自己前期的調研進行把控,因為提意見的人不一定能像你一樣熟悉產品,可能存在一定的主觀性。

          選擇性的進行修改,也要保持自己的自信度,適度的自信可以增強你對作品的信任度,我們不能總是質疑自己的能力,只要保持不斷努力學習的心態,有時候也要相信自己的專業能力,相信自己就能給作品帶來自信度,你的需求方才能被你的專業意見所引導。

          UI設計改稿經驗總結

          14、包裝,整理設計思路

          作品包裝總是會被很多設計師所忽略,在進行作品展示的時候也比較隨意,沒有充分利用作品包裝的優勢傳達出作品自身的價值。我們將作品展示出來進行交流時,需要通過適當的包裝把作品更好的一面清晰的傳遞給讀者。

          在進行作品包裝的時候,可以加入自己的設計思路輔助傳達出作品背后的故事,讓讀者更容易走進你的作品。通過包裝把原本單調的獨立界面進行解剖,利用整體布局、局部提煉、細節展示、文案描述、思路整理等形式,讓作品呈現效果更加豐富多樣。

          作品包裝中一些簡單的設計技巧:

          • a. 作品包裝設計中的版面布局需要舍得,適當加大留白會給版面更強的呼吸感;

          • b. 局部提煉,對界面設計中的一些視覺表現力強的樣式提取出來獨立展示,豐富作品的細節展示;

          • c. 精心挑選樣機,讓作品展示效果更佳,有時候也可以自己繪制更加簡練的樣機模型;

          • d. 設計組建選擇性展示,增刪挑選的組建讓布局更加整體,視覺效果更加協調,整體組合形成塊面感;

          • e. 利用對比突出重點,不要使整體布局都處于平面化;

          • f. 裝飾元素的運用,可以利用輔助圖形、短線等進行設計裝飾;

          • g. 加強頭圖設計的視覺表現,提高讀者的注意力。

          作品包裝設計分為平臺型作品包裝和作品集包裝,也是需要我們設計師加以重視的一個板塊,以后我們單獨進行這方面的研究分享。

          UI設計改稿經驗總結

          15、分享,設計交流

          此時,你已經完成了這次 APP 改版之旅,恭喜你擊敗了懶寶寶,相信下一次你會具備更強的自我驅動力。完成一次作品你可以選擇封印在冰冷的硬盤,也可以選擇分享給更多的設計朋友,大家互相學習和討論,個人比較傾向于后者。

          看看老外的社交APP UI界面設計,不知道你能有啟發不?

          藍藍設計的小編

          社交軟件已然成為現今人們溝通交流的主要媒介,那什么樣的對話頁面更大家受歡迎呢?對話頁面的ui要怎么設計呢?下面列舉12個國外社交app ui設計案例供設計師盆友們參考。

          日常APP體驗-交互知識點匯總-2

          資深UI設計者

          Image title


          Image title


          Image title


          Image title


          Image title


          Image title


          Image title


          Image title


          Image title


          Image title



          Image title


          Image title


          Image title


          Image title


          總結:

          大家在日常使用APP過程中也可以帶有目的性,發現一些好看的UI或是好的交互點可以截圖保存和思考:為什么這么設計?目的是什么?分析其優勢之處,還可以和競品的相似交互進行對比,始終相信“不積跬步 無以至千里”,通過在點滴中慢慢積累,今后當你遇到類似的問題時就可以快速回憶起這些知識點,自然就可以運用自如,thanks~

          WebVR大潮來襲 ---前端開發能做些什么?

          周周

                  去年谷歌和火狐針對WebVR提出了WebVR API的標準,顧名思義,WebVR即web + VR的體驗方式,我們可以戴著頭顯享受沉浸式的網頁,新的API標準讓我們可以使用js語言來開發。今天,約克先森將介紹如何開發一個WebVR網頁,在此之前,我們有必要了解WebVR的體驗方式。

          WebVR體驗模式

          WebVR的體驗方式可以分為VR模式和裸眼模式

          一、VR模式

          ?滑配式HMD + 移動端瀏覽器

                  如使用cardboard眼鏡來體驗手機瀏覽器的webVR網頁,瀏覽器將根據水平陀螺儀的參數來獲取用戶的頭部傾斜和轉動的朝向,并告知頁面需要渲染哪一個朝向的場景。

          ?分離式HMD + PC端瀏覽器

                  通過佩戴Oculus Rift的分離式頭顯瀏覽連接在PC主機端的網頁,現支持WebVR API的瀏覽器主要是火狐的 Firefox Nightly和設置VR enabled的谷歌chrome beta。

          二、裸眼模式

                  除了VR模式下的體驗方式,這里還考慮了裸眼下的體驗瀏覽網頁的方式,在PC端如果探測的用戶選擇進入VR模式,應讓用戶可以使用鼠標拖拽場景,而在智能手機上則應讓用戶可以使用touchmove或旋轉傾斜手機的方式來改變場景視角。

                  WebVR的概念大概就如此,這次我們將采用cardboard + mobile的方式來測試我們的WebVR場景,現在踏上我們的開發之旅。

          準備工作

                  技術和框架:three.js for WebGL

                   Three.js是構建3d場景的框架,它封裝了WebGL函數,簡化了創建場景的代碼成本,利用three.js我們可以更優雅地創建出三維場景和三維動畫。

                  測試工具:智能手機 + 滑配式頭顯

                  推薦使用cardboard或者某寶上三十塊錢的高仿貨。當然,如果你練就了裸眼就能將手機雙屏畫面看成單屏的能力也可以忽略。

                 需要引入的js插件:

          • three.min.js
          • webvr-polyfill.js
          • VRcontrols.js
          • VReffect.js
          • webvr-manager.js

          webvr-polyfill.js

                  由于WebVR API還沒被各大主流瀏覽器支持,因此需要引入webvr-polyfill.js來支持WebVR網頁,它提供了大量VR相關的API,比如Navigator.getVRDevices()獲取VR頭顯信息的方法。

          VRControls.js

                  VR控制器,是three.js的一個相機控制器對象,引入VRcontrols.js可以根據用戶在空間的朝向渲染場景,它通過調用WebVR API的orientation值控制camera的rotation屬性。

          VREffect.js

                  VR分屏器,這是three.js的一個場景分屏的渲染器,提供戴上VR頭顯的顯示方式,VREffect.js重新創建了左右兩個相機,對場景做二次渲染,產生雙屏效果。

          webvr-manager.js

                   這是WebVR的方案適配插件,它提供PC端和移動端的兩種適配方式,通過new WebVRManager()可以生成一個VR圖標,提供VR模式和裸眼模式的不同體驗,當用戶在移動端點擊按鈕進入VR模式時,WebVRManager便會調用VREffect分屏器進行分屏,而退出VR模式時,WebVRManager便用回renderer渲染器進行單屏渲染。

                  具體使用方法我們將在下文說明。

                  3D場景構建

                  首先我們創建一個HTML文件

                 <!DOCTYPE html>

                 <html lang="en">

                 <head> 

                        <meta charset="UTF-8">

                            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

                        <title>webVR-helloworld</title>

                             <style type="text/css">

                                   * { 

                                     margin: 0;

                                     padding: 0;

                                      }

                               html,body {

                                           height: 100%;

                                          overflow: hidden;

                               }

                         </style>

                   </head>

                   <body>

                   </body>

                  <script src="./vendor/three.min.js"></script>

                    <script src="./vendor/webvr-polyfill.js"></script>

                    <script src="./vendor/VRControls.js"></script>

                 <script src="./vendor/VREffect.js"></script>

                 <script src="./vendor/webvr-manager.js"></script>

                 <script src="./main.js"></script>

                 </html>

                   接下來編寫js腳本,開始創建我們的3d場景。

          1、創建場景

                  Three.js中的scene場景是繪制我們3d對象的整個容

                 1.var scene = new THREE.Scene();

          2、添加相機

          Three.js的相機

          Three.js中的camera相機代表用戶的眼睛,我們通過設置FOV確定視野范圍,

          • //定義一個60°的視角,視線范圍在1到1000的透視相機
          • var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
          • scene.add(camera);

          3、添加渲染器

          • Three.js的渲染器用來渲染camera所看到的畫面


          • //初始化渲染器 antialias參數為ture表示開啟抗鋸齒策略
          • var renderer = new THREE.WebGLRenderer({ antialias: true } );
          • //設置渲染器渲染尺寸
          • renderer.setSize(window.innerWidth,window.innerHeight);
          • //設置渲染背景為白色
          • renderer.setClearColor(0xeeeeee);
          • //將渲染場景的canvas放入body標簽里
          • document.body.appendChild(renderer.domElement);

          • 添加一個立方體網格

          • // 創建立方體
          • var geometry = new THREE.CubeGeometry( 10,10,10);
          • var cubematerial = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
          • var cube = new THREE.Mesh( geometry, Cubematerial );
          • cube.position.set(0,100,-50);
          • cube.rotation.set(Math.PI/6,Math.PI/4,0);
          • scene.add(cube);

          4、啟動動畫

          • 產生動畫的原理就是讓camera持續連拍,同時每一次改變物體的屬性,通過requestAnimationFrame()方法遞歸的方式來持續更新場景對象屬性,你可以將它理解為setTimeout的優化版。相比setTimeout函數,requestAnimationFrame可以保證動畫渲染不會因為主線程的阻塞而造成跳幀。


          • function animate() {
          •     //讓立方體旋轉
          •     cube.rotation.y += 0.01;
          •     //渲染器渲染場景,等同于給相機按下快門
          •     renderer.render(scene, camera);
          •     //遞歸運行該函數
          •     requestAnimationFrame( animate );
          • }
          • animate();//啟動動畫

                至此,我們已經繪制了一個簡單的3d場景并且讓它動了起來,接下來,我們需要讓我們的場景可以支持WebVR模式。

          WebVR場景開發

                 WebVR網頁的基本原理其實是通過瀏覽器的WebVR API獲取用戶輸入,進而控制相機的視角,在VR模式下通過VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺儀)的方式顯示畫面,裸眼情況下提供全屏+touchmove/gyroscope。

                 現在我們開始分別創建上文所說的VR控制器和VR分屏器

          • //初始化VR控制器需要傳入場景相機
          • var vrControls = new THREE.VRControls(camera);
          • //初始化VR渲染器需要傳入場景渲染器
          • var vrEffect = new THREE.VREffect(renderer);
          • //初始化VR適配器,傳入渲染器和分屏器
          • var vrManager = new WebVRManager(renderer, vrEffect);

                然后在前面創建的場景渲染函數里調用

          • function animate() {
          •     cube.rotation.y += 0.01;
          •     //實時更新相機的位置和轉角
          •     vrControls.update();
          •     vrManager.render(scene, camera);
          •     //遞歸運行該函數
          •     requestAnimationFrame( animate );
          • }

                 至此,我們已經完成了一個基本的webVR網頁,不過少了點交互效果好像,敬請期待Web開發的新世界---WebVR之交互事件。

          • 完整代碼:在文章基礎上添加了天空和地面相關代碼,以及下篇文章將講到VR凝視交互事件。
          • demo演示地址 :手機瀏覽需設置允許橫屏。

          結語

                  目前,國外的谷歌、火狐、Facebook和國內百度已推出支持WebVR瀏覽器的版本,微軟也宣布將推出自己的VR瀏覽器,隨著后期5g網絡極速時代的到來以及HMD頭顯的價格和平臺的成熟,WebVR的體驗方式將是革命性的,用戶通過WebVR瀏覽網上商店,線上教學可進行“面對面”師生交流等,基于這種種應用場景,我們可以找到一個更好的動力去學習WebVR。






          卡片式UI設計欣賞

          藍藍設計的小編

          在設計中,卡片上設計是屢見不鮮的,比如:用在UI產品的包裝排版、APP/web的列表排版、banner輪播的設計、導航的切換等。在這些上做出很多別出心裁的卡片視覺設計及炫酷的動畫效果,都能帶給用戶很好的體驗。

          優秀UI界面設計評析

          藍藍設計的小編

          男生運動鞋商店支付界面,顏色搭配非常舒服,鞋子攝影也很漂亮,字體字號運用非常到位。

          界面欣賞

          博博

          • 如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

            萬聚制作 2018-05-15 13:30:00

          素材源自網絡

          這是我們收集UI / UX交互的一周時間,以增強您的用戶界面靈感。我們專注于酷炫的動畫,布局設計,用戶體驗思考等等。我們正在從靜態,動態甚至是現場原型混合它,這可能是一個偉大的每周系列書簽!本周,我們對交互/轉換的關注較少。本周我們一直在挖掘一些動畫,但我們發現的主要是靜態的。我們有各種各樣的組合,恰到好處地為您提供創意提升。

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          用戶界面靈感:國外設計大神UI設計作品欣賞,每一張都是壁紙!

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          這些小小的改變,能夠讓UI動效更上一層樓

          藍藍設計的小編

          UI動效現如今在 APP 和網頁中幾乎已經成為了基本的組成部分,經過仔細打磨的 UI動效對于整個界面的提升是顯著的。

          案例講解 | 移動端的長表單應該如何設計?

          博博

          案例講解 | 移動端的長表單應該如何設計? 

          原創 UEDC  2017-10-24

          作者 Echo

          基于業務需求(常見于B端產品),有時候用戶在操作過程中,不可避免的需要填寫很多表單。針對于移動端長表單,我們應該如何去正確的設計呢?

          本文大綱:

          1.三種主方案

          2.主方案1的設計討論

          3.主方案2的設計討論

          4.主方案3的設計討論

          5.總結

          1.三種主方案

          針對長表單的設計,按照設計思路的不同,可以分為三種主方案,如下所示:

          PS:圖中的舉例的關鍵字段僅僅為舉例需要。

          主方案1:我們常見的設計形式,一個界面將所有表單信息展示出來。

          主方案2:將不同的分組表單放在不同的下一級界面,用戶填寫之后返回。

          主方案3:分步操作,一個界面完成一組表單內容,點擊下一步進入下一組表單。

          2.主方案1的設計討論

          主方案1的設計優缺點

          優點:一個界面將所有表單信息展示出來,如果想查找某些填寫的信息也變得更容易,相對于主方案2和3,減少了頁面跳轉操作和查看。

          缺點:基于移動端界面承載能力較弱,一個界面將表單所有展示出來,用戶一次性瀏覽和操作起來壓力較大,容易使操作流程失敗,導致成功率大大降低。

          針對于主方案1,用戶完成表單完成后,提交按鈕有三種主要的設計方法,一種是提交按鈕放在表單最后,一種是提交按鈕放在導航欄上。另一種是,提交按鈕底部懸浮。如下圖所示:

          方案1.0,如果提交按鈕放在表單之后,那么用戶的視覺流和操作感覺是一致的,流暢而自然。但是會出現一個問題,用戶在輸入信息時,鍵盤調用會遮擋到提交按鈕。Android手機上的輸入法都可以點擊輸入法上的按鈕將鍵盤推下去。而iOS 原生輸入法在輸入法中沒辦法推下去,只能點擊其他非編輯區域才能推下鍵盤。這樣就顯得很麻煩,用戶可能會忽略掉提交按鈕。

          方案1.1解決了提交按鈕會被鍵盤擋住的缺陷,但是視覺流和操作行為錯亂,用戶在屏幕底部輸入完成之后,視覺和手指要返回到頂部操作。

          方案1.2提交按鈕底部懸浮,解決了方案1.1的視覺流和操作紊亂的問題,解決了方案1.0提交按鈕被隱藏的問題,但是當輸入文本,調出鍵盤時,依舊會被擋住。

          使用底部懸浮按鈕的場景是操作按鈕非常重要,例如手機淘寶的立即購買和加入購物車。

          同時底部懸浮按鈕不適用于文本操作類。例如文章說的長表單文本輸入。當輸入文本,調出鍵盤時,依舊會被擋住。

          底部懸浮按鈕適用于非文本輸入的使用場景。從手機淘寶、新浪微博可以看出,適用于在界面中非文本輸入、提供一個功能入口或者是界面非文本輸入的選擇信息的確認。

          3.主方案2的設計討論

          主方案2的設計優缺點

          優點:與主方案3相比不同分組表單之前切換查看信息方便快捷。申請流程的首頁簡潔,填寫信息全部隱藏到下一級界面。

          缺點:來回跳轉,操作負荷較大,會把用戶繞暈。

          在方案2.0中用戶填寫完成的分組和未分組填寫分組區分不開,將方案2.0進行優化,例如填寫完成后,會出現已完成的標簽,提示用戶已完成和未完成不同的狀態(如方案2.1)

          4.主方案3的設計討論

          Facebook曾針對分步注冊與非分步注冊做過A/B Test,其結論指出分步注冊的轉化率遠高于非分步注冊。由此可見,非分步注冊強行減少注冊頁面,不如適當拉長戰線,給用戶輕負荷的操作,讓用戶在不知不覺中完成注冊流程。

          主方案3的設計優缺點

          優點:流程分步操作,相對于主方案1,用戶操作成功率大幅度提高。

          缺點:如果用戶操作到了第三步,需要返回第一步確認填寫信息的準確性,那么用戶需要兩次返回。

          用戶填寫的信息做保存(緩存),用戶返回上一步,填寫的數據做保留。H5依舊適用,用戶填寫的數據保存在數據庫,用戶返回上一步時,同時刷新載入數據庫記錄的數據。

          對于方案3.0和3.1 。下一步按鈕不同。究竟采取哪種?方案3.0視覺流和操作流是正常情況,且不存在按鈕被鍵盤擋住,所以方案3.0最佳。

          移動端長表單設計總結

          主方案1、2和3,都有各自不同的優缺點。

          一個交互流程的好壞,一個最重要的標準之一是讓用戶順利完成操作流程,保證操作流程的成功率,才能完成用戶的目標。以此標準來看,主方案3是最好的。

          接下來探討一個細節問題,就是提交按鈕是放在頂部導航欄、信息內容區內還是底部懸浮?

          這里分為4種情況:

          情況1:內容區加上操作按鈕不被鍵盤覆蓋,建議按鈕放在內容區內。

          情況2:必填的內容未被鍵盤覆蓋,非必填被覆蓋,建議操作按鈕放在導航欄上,例如朋友圈、QQ空間和新浪微博。

          情況3:必填的表單超過一屏,建議按鈕放在內容區。不建議放在導航欄上的原因有兩個:

          a.視覺流錯誤,從上往下,信息量很大,用戶滑動瀏覽時,會忽略且很難聯想點擊導航欄上的操作,行業常見放在導航欄上是因為必填的不超過一屏。

          b.當必填項過多時,要滑動屏幕才能填完。 把按鈕放在右上角的導航欄,當用戶還沒填寫完成,那么在按鈕放在導航欄上很容易去點擊,容易引導用戶犯錯。

          情況4:必填超過一屏,且無非文本輸入,建議可使用底部懸浮。


          PC端表單設計的研究:如何設計一個優秀的表單頁面

          藍藍設計的小編

          最近身邊的一些小伙伴,總會遇見B端設計工作,對于這種偏后臺設計的B端設計,總會有大量的表單設計需要做,結合以前自己也有過不少表單設計的工作,在這里給大家分享一下自己對于PC端表單設計的研究,聊一聊表單在PC端中的運用。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合