Tocas: Hangout 式的歡迎畫面

[goodjack]

在 Really Good UX 看到的
有點類似 Modal 或是燈箱之類的設計

https://www.reallygoodux.io/blog/google-hangouts-new-user-onboarding

[YamiOdymel]

有沒有什麼想到的 HTML 構造或是 JavaScript 用法範例提供一下你的想法？

避免我做出很反人類的東西

[yeungalan]

要不試試用Modal + Dimmer 實作這個功能?

[YamiOdymel]

2.4 要推出的 Modal 基本上有更穩定，但是應該是做不到步驟按鈕分兩邊放

如果要追加這個功能我對他的結構概念是

.ts.onboarding
    .controls
        .left
        .right
    .steps
        .item
        .item

不過我還要想一下，避免重複的元件太多…

[goodjack]

之前用過的 Lightbox 是這套
http://lokeshdhakar.com/projects/lightbox2/

但我不確定這個在現在的時空背景是不是反人類
而且他只支援 image 所以相對單純

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

[goodjack]

我把 Hangouts 的抽出來了
長這樣
https://gist.github.com/goodjack/7a69688151cc8b0109730f5da391f1e0

[YamiOdymel]

這個結構夭壽喔

[YamiOdymel]

感覺這個 OnBoarding 跟 Lightbox 還有 Modal 很相似，該好好思考一下如何避免新增一堆類似的元件…

[goodjack]

用 VSCode 稍微收一下

[goodjack]

219 行那個 <ul> 看起來像導航的點

<ul class="HXlW9e">
    <li class="XTKfyc aa" jsname="mnKkPb"></li>
    <li class="XTKfyc" jsname="mnKkPb"></li>
    <li class="XTKfyc" jsname="mnKkPb"></li>
    <li class="XTKfyc" jsname="mnKkPb"></li>
</ul>

[YamiOdymel]

這個功能基本上可以透過 Tocas 3.0 的 Carousel 和 Modal 達成（基本啦），所以就不額外做一個「類-燈箱」的元件了。

不過小抱怨一下，要是有網站用上這種設計，我會覺得十分聒噪啊⋯。